虚拟DOM

1、 Vue.js 框架为什么要用 Virtual DOM 机制？

①为了让应用可以更容易的实现跨平台

如果我们的代码是直接操作 DOM，那如果换到那些没有 DOM 的环境中呢，比如小程序、移动 App，多一层封装就可以应对环境的变化，对下兼容不同环境，对上提供统一 API，正是因为这一点，我们今天才能看到很多的跨平台解决方案。virtual dom 中根据不同环境，做不同的渲染操作。例如，在 virtual dom 里创建了一个 div，在 web 平台下渲染的是一个 div，但是在移动端就可以渲染为一个 view 组件，这个view指的是原生组件。

②可以在 Virtual DOM 这一层可以通过 Diff 算法，判断数据是否发生了修改，从而避免不必要的 DOM 操作

现代化的应用，数据交互比较频繁，也就是说界面上的元素经常需要随着数据的变化而变化，但是并不是每次数据变化，界面上的每个元素都需要重写渲染。数据改变页面重绘的时候使用diff算法，可以让改变的重绘不改变的不重绘。

2、虚拟 DOM 可以优化性能，使用虚拟 DOM 真的会“快”么，如果快，它快在哪里？

虚拟 DOM 不是什么时候都快，第一次要创建虚拟DOM是需要消耗内存的，要额外创建 JS 对象肯定不快。但在大型项目中当页面存在很多交互还有DOM操作的时候 ，性能会更好。在 Virtual DOM 这一层，通过 Diff 算法，把没必要的 DOM 更新“打回头”，降低 DOM 开销。利大于弊。

3、v-key
v-key 的作用是更新组件时，判断两个节点是否相同，相同就复用，不相同就删除旧的重新创建新的。
应用：
如示例代码2中，当给列表中插入元素的时候，设置 Key 的情况下，Diff 的过程中会把相同的元素重用，只会在新元素的位置做一次 DOM 的插入操作，如果不适用 Key 的话会把寻找到插入元素以及之后的元素做修改 DOM 操作（通过设置 Key 和不设置 Key 对代码调试可知）
当然 Key 还有一个作用是防止副作用发生，例如示例代码3中，使用 Key 可以避免列表渲染过程中不必要的 bug。
当选中第一项后，再往第一项之前插入元素，这时候新插入的第一项会被选中，因为这个时候虚拟 DOM 在 diff 的时候重用了第一项，为了解决这个问题，可以给每一个列表项添加唯一 Key 解决。
最佳实践：
不设置 Key 的情况下只适合不带状态的列表项，可以就地复用，但是大多数情况下，列表项都有自己的状态（数据）在 v-for 遍历列表项目的时候建议设置 Key，在 v-for 遍历列表项目如何设置 Key 应该设置为唯一值，而不是遍历时候的索引，因为索引作为 Key 和不带 Key 的作用是一样的。index 作为Key 时，每个列表项的索引在变化前后也是一样的，都是直接判断 sameVnode 然后复用。
另外在使用 transition 实现过渡的时候，当有相同标签名的元素切换，需要设置 Key 让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。所以在使用 的时候建议给他内部的元素都设置 Key。