小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、组件中data要用函数形式

源码地址：src/core/instance/state.js-initData()

在组件初始化时，initData方法中，当data为函数时，则执行，并返回结果。当不为函数时直接使用原来的data。

• Vue组件可能存在多个实例，如果使用对象形式定义data,则会导致他们共用一个data对象，这并不合理，所以要用函数的形式。
• 采用函数形式定义data，在initData时会将其作为工厂函数返回全新的data对象，有效规避多实例之间状态污染问题。
• Vue根实例只有一个，所以可以使用函数形式或对象形式。

二、diff算法

1.必要性（lifecycle.js-mountComponent()）：组件调用一次mount(),就会创建一个watcher,watcher力度降低，但组件中可能存在多个data中的key的使用，所以使用diff算法来对比新旧虚拟DOM，从而进行更新。

2.执行方式（patch.js-patchVnode()）

3.高效性（patch.js-updateChildren()）

1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真 实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。

2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到 发生变化的地方。

3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染 结果newVnode，此过程称为patch。

4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文 本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果 没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非 常精确找到相同节点，因此整个patch过程非常高效。