Cookbook组件形式：优化Vue组件的运行时性能-创新互联

Vue 2.0 在发布之初，就以其优秀的运行时性能著称，你可以通过这个第三方 benchmark 来对比其他框架的性能。Vue 使用了 Virtual DOM 来进行视图渲染，当数据变化时，Vue 会对比前后两棵组件树，只将必要的更新同步到视图上。

Vue 帮我们做了很多，但对于一些复杂场景，特别是大量的数据渲染，我们应当时刻关注应用的运行时性能。

本文仿照Vue Cookbook 组织形式，对优化 Vue 组件的运行时性能进行阐述。

基本的示例

在下面的示例中，我们开发了一个树形控件，支持基本的树形结构展示以及节点的展开与折叠。

我们定义 Tree 组件的接口如下。 data 绑定了树形控件的数据，是若干颗树组成的数组， children 表示子节点。 expanded-keys 绑定了展开的节点的 key 属性，使用 sync 修饰符来同步组件内部触发的节点展开状态的更新。