传统的原生网页开发是 操作DOM元素而达到视图更新的效果

在Vue中是 数据改变->虚拟DOM(计算变更)->操作DOM->视图更新

什么是虚拟DOM? 就是使用一个JS对象来模拟DOM结构。 DOM树结构，首先要了解Vue只能绑定一个顶级父节点，后续修改都是修改子节点得数据

虚拟DOM的好处是

1. 可以减少DOM操作 虚拟DOM可以将多次操作合并为一次操作，而原生添加1000个节点时，是一个接着一个操作的(减少DOM操作次数) 其次虚拟DOM借助DOM diff可以把多余的操作省掉，而原生添加1000个节点，其实只有10个是新增的，其他都是多余操作(减少DOM操作范围)。
2. 能跨平台渲染 虚拟DOM不仅可以变成DOM，还可以变成小程序，ios应用，Android应用，因为虚拟DOM本质上只是一个JS对象。 虚拟DOM的缺点是 需要额外的创建函数，如createElement或h,但是可以通过JSX来简化成XML写法 vue 采用的是虚拟 dom 通过重写 setter ， getter 实现观察者监听 data 属性的变化生成新的虚拟 dom 通过 h 函数创建真实 dom 替换掉dom树上对应的旧 dom。

diff算法

比较新旧DOM的对比算法

只比较同一层级，不跨级比较 标签名不同时，直接删除，不继续深度比较 标签名相同时，key相同，就认为是相同节点，不继续深度比较