虚拟Dom、diff算法、nextTick

虚拟dom本质上就是一个JS对象

真实的DOM有一堆的属性和方法，操作起来会导致性能很慢，而且每操作一次就会导致一次重绘和回流，虚拟DOM等数据全都更新完之后，只更新了真实DOM需要改变的地方，而且只会有一次重绘和回流

初次渲染页面的时，会根据数据创建一个虚拟DOM对象，根据虚拟DOM生成真正的DOM，渲染到页面上

数据变化后，会根据新的数据，再创建新的虚拟DOM

利用diff算法对两份虚拟dom进行对比

diff算法

diff算法可以看作是一种对比算法，diff算法可以找到新旧虚拟Dom之间的差异，并根据对比后的结果更新真实Dom。
用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中，当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异，把所记录的差异应用到所构建的真正的DOM树上，视图就更新了
添加key唯一标识后Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
唯一标识，为了高效的更新虚拟DOM
transition过渡时，使用key属性，可以区分它们是否变化，否则vue只会替换其内部属性而不会触发过渡效果

第一种情况：元素（标签）变了，删除元素，重建新元素

第二种情况：元素没变，属性或内容变了，只更新属性或内容

第三种情况：使用v-for遍历的时候，有两种情况

$nextTick

简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

当修改了数据，因为dom是异步的，所以如果在修改的数据下面重新操作dom会出问题，需要保证dom更新完成才能操作，用nextTick可以在dom渲染后，立即执行该函数。