key,
label: `节点 ${key}`,
};
if (layers > 1) {
node.children = this.getRandomData(layers - 1, count, node);
}
return node;
});
},
},
};
<script>
你可以通过这个CodeSandbox 完整示例来实际观察下性能损耗。点击箭头展开或折叠某个节点，在 Chrome DevTools 的控制台（不要使用 CodeSandbox 的控制台，不准确）中输出如下。
first rendering: 406.068115234375ms
expanded change: 231.623779296875ms在笔者的低功耗笔记本下，初次渲染耗时 400+ms，展开或折叠节点 200+ms。下面我们来优化 Tree 组件的运行性能。
若你的设备性能强劲，可修改生成的节点数量，如
this.getRandomData(4, 10) 生成 10000 个节点。使用 Chrome Performance 查找性能瓶颈
Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间。使用 Chrome 开发者工具分析页面性能的步骤如下。
打开 Chrome 开发者工具，切换到 Performance 面板 点击 Record 开始录制 刷新页面或展开某个节点 点击 Stop 停止录制
console.time 输出的值也会显示在 Performance 中，帮助我们调试。更多关于 Performance 的内容可以点击这里查看。优化运行时性能
条件渲染
我们往下翻阅 Performance 分析结果，发现大部分耗时都在 render 函数上，并且下面还有很多其他函数的调用。
在遍历节点时，对于节点的可见性我们使用的是
v-show 指令，不可见的节点也会渲染出来，然后通过样式使其不可见。因此尝试使用
v-if 指令来进行条件渲染。
<li
v-for="node in nodes"
v-if="status[node.key].visible"
:key="node.key"
class="tree-node"
:style="{ 'padding-left': `${node.level * 16}px` }"
>
...
</li>
v-if 在 render 函数中表现为一个三目表达式：
visible ? h('li') : this._e() // this._e() 生成一个注释节点即
v-if 只是减少每次遍历的时间，并不能减少遍历的次数。且Vue.js 风格指南中明确指出不要把
v-if 和
v-for 同时用在同一个元素上，因为这可能会导致不必要的渲染。
