一.什么是虚拟DOM？
虚拟DOM是 VUE 一个比较核心的概念，为什么会有虚拟DOM呢？首先可以与传统的网页开发做个对比，在没有 VUE 和 REACT 框架之前，我们都是使用原生 JavaScript 或者 jQuery，那时候是直接对 DOM 元素进行操作来达到视图更新的一个效果。
操作DOM =》 视图更新
在使用 VUE 框架以后，我们就变成了通过改变数据去推动视图更新。
数据改变 =》 视图更新
虽然看着很神奇，但是其实还是要去操作 DOM 来达到试图更新的效果。
数据改变 =》 操作DOM =》 视图更新
而这一步 数据改变 =》 操作DOM 就是VUE 框架内部来完成的。但是项目中会有很多数据发生改变，那么是否每一次数据改变都要去操作DOM呢，当然不是，所以就推出了虚拟DOM这个概念。
VUE 中的 template 模板或者 render 函数都会去形成虚拟 DOM。
因为 JS 的执行速度是很快的，比操作 DOM 要快很多，所以说在数据改变的时候不去操作 DOM，而是先去把这个进行的改变做个计算，计算出所有的变更然后再去操作真实 DOM，所以实际流程是：
数据改变 =》 虚拟DOM（计算变更） =》 操作真实的DOM =》 视图更新
什么是虚拟 DOM 呢？
就是用 JS 去模拟我们的 DOM 结构。
举个例子：下文是一个 DOM 结构。
<div id="app" class="container">
<h1>虚拟DOM</h1>
<ul style="color: red">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</div>我们会通过 JS 去表达一下这个结构。
这个做法会写成一个对象，对象里面有三个比较重要的属性分别是：tag（标签）、props（属性）、children（子元素）。
比如最外层的 DOM 节点为 div 标签，所以 tag 就是 div，props 属性就为 id 和 className，children 子元素可能不止一个，所以是个数组，然后里面的每一项都是个对象，也有tag，props和 children属性。
let VNode = {
tag: "div",
props: {
id: "app",
className: "container",
},
children: [
{
tag: "h1",
children: "虚拟DOM",
},
{
tag: "ul",
props: {
style: "color: red",
},
children: [
{
tag: "li",
children: "第一项",
},
{
tag: "li",
children: "第二项",
},
{
tag: "li",
children: "第三项",
},
],
},
],
};
这样就完成了用 JS 表达 DOM结构，然后就是用这个虚拟 DOM 结构去计算变更并且去操作真实 DOM。
二.怎么去使用虚拟DOM
Vue当中虚拟 DOM 的实现是参考了 Snabbdom 库。
Snabbdom库是准备一个空容器，然后用 vnode 表示一个节点，然后再通过 patch 函数把这个 vnode（虚拟节点）插入到容器里。
这里 h 函数就是创建虚拟节点的函数，接受三个参数 h(tag，props，children)，就相当于用 JS 表达 DOM 结构。
我们现在模拟一下这个场景：
<body>
<div id="container"></div>
<button id="btn">改变</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/h.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-class.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-props.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-style.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom.js"></script>
<script>
// 引入 snabbdom 库
const snabbdom = window.snabbdom;
// 定义 patch 函数,将虚拟 DOM 插入到空容器
const patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners,
]);
// 引入 h 函数,用于创建虚拟节点
const h = snabbdom.h;
// 创建空的容器
const container = document.getElementById("container");
// 创建vnode h('ul#list',{},[]) 是说创建一个 ul 标签,id 是 list,没有属性,所以第二个参数为空对象{},然后子节点有多个 li 所以是个数组[]
let vnode = h("ul#list", {}, [
h("li.item", {}, "第一项"), // 子节点 [] 的每一项又是一个 h 函数去创建节点
h("li.item", {}, "第二项"), // 这里表示创建 li 标签,类名为 item,没有属性,子节点是文本,所以是字符串
]);
// 把 vnode 塞入到容器
patch(container, vnode);
</script>结果展示为：
此时点击按钮改变，将第二项内容改变，然后再加一个第三项：
// 获取按钮节点
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// 创建新的 vnode
let newVnode = h("ul#list", {}, [
h("li.item", {}, "第一项"),
h("li.item", {}, "第二项123"),
h("li.item", {}, "第三项"),
]);
// 将新的 vnode 替换原来的 vnode
patch(vnode, newVnode);
// 将 vnode 赋值成最新的 newVnode，方便下次比较
vnode = newVnode;
});展示结果：
会发现点击按钮以后，第二项和第三项闪动了一下，但是第一项没有，是因为第一项数据和结构都没有发生变化，所以不会去重新渲染第一项，只会去渲染第二项和第三项。 这就是使用虚拟DOM的好处，他会去比较变化，去计算出来一个最小的需要更新的视图。
为什么会这样呢？
这是旧的 DOM 结构对应的虚拟 DOM。
let oldVnode = h("ul#list", {}, [
h("li.item", {}, "第一项"),
h("li.item", {}, "第二项"),
]);这是新的 DOM 结构对应的虚拟 DOM。
let newVnode = h("ul#list", {}, [
h("li.item", {}, "第一项"),
h("li.item", {}, "第二项123"),
h("li.item", {}, "第三项"),
]);Vue 并不会直接拿这个新的虚拟 DOM 去渲染成真实 DOM，因为这样效率不高。
由此图看，肯定是第二种方式比较快，因为第一种方式中间还夹杂着生成虚拟 DOM 的过程，所以此时还少了一部算法操作，就是 diff 算法，通过 diff 算法去计算出新旧两个虚拟 DOM 之间最小的变化，然后再去渲染真实 DOM，这一步也就是前文所说的计算变更，也是为什么第一项不闪动没有重新渲染的原因。
三.什么是 diff 算法
diff 算法就是对比两个虚拟节点，找出它们的差异，对应到真实 DOM 上面去打补丁的过程。目的是找到这些差异，以最小的代价去操作DOM。
上文中，只有第二个 li 标签修改了文本，新增了第三个 li 标签，其他都是不变的，所以没必要所有的节点都要更新，只更新这两个 li 标签就行，diff 算法就是查出这两个 li 标签的算法。
总结：diff 算法是一种对比算法。对比两者是旧虚拟 DOM 和新虚拟 DOM，对比出哪个虚拟节点更改了，找出这个虚拟机点，并且只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实 DOM，进而提高效率。
四.diff 算法特点
1.同层节点比较
新旧虚拟 DOM 对比的时候，diff 算法比较只会在同层级进行，不会跨级比较。
2.节点比较规则
生成虚拟 DOM 的时候每一个节点都是有索引的，类似于 v-for 循环生成时候的 key 值。对比新旧虚拟 DOM 的时候只有 key 相同的节点才会去进行对比。
这一点在以前将 v-if 的时候提到过一点。
这里就是利用 key 值不同，使新旧虚拟 DOM 的 input 标签不去进行对比，而是重新渲染。
3. 最小更新子节点
在同一节点下，diff 算法会递归地比较和更新子节点，如果有相同的子节点，只是顺序不一样，diff 算法会复用旧节点，去替换而不是重新渲染。
就比如这个 p 标签和 span 标签，在同一个 li 标签下，且新旧 p 节点和 span 节点完全一样，就不会重新渲染，只是替换一下它们的位置。
4.深度优先
diff 算法是深度优先算法。会优先往深度去比较，下图是顺序。
