Vue中的虚拟DOM和Diff算法实例分析
这篇文章主要介绍了Vue中的虚拟DOM和Diff算法实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的虚拟DOM和Diff算法实例分析文章都会有所收获，下面我们一起来看看吧。
创新互联建站是一家集网站建设,济阳企业网站建设,济阳品牌网站建设,网站定制,济阳网站建设报价,网络营销,网络优化,济阳网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
简单介绍一下 虚拟DOM 和 diff算法
先用一个简单的例子来说一下 虚拟DOM 和 diff算法：比如有一个户型图，现在我们需要对这个户型图进行下面的改造，
其实，这个就是相当于一个进行找茬的游戏，让我们找出与原来的不同之处。下面，我已经将不同之处圈了出来，
现在，我们已经知道了要进行哪些改造了，但是，我们该如何进行改造呢？最笨的方法就是全部拆了再重新建一次，但是，在我们实际中肯定不会进行拆除再新建，这样效率太低了，而且代价太昂贵。确实是完成了改造，但是，这不是一个最小量的更新，所以我们想要的是 diff，
那么diff是什么呢？其实，diff 在我们计算机中就是代表着最小量更新的一个算法，会进行精细化对比，以最小量去更新。这样你就会发现，它的代价比较小，也不会昂贵，也会比较优化，所以对应在我们 Vue底层中是非常关键的。
好了，现在回归到我们的Vue中，上面的户型图中就相当于vue中的 DOM节点，我们需要对这些节点进行改造（增删调），然后以最小量去更新DOM，这样就会避免我们性能上面的开销。
// 原先DOM
标题
// 修改后的DOM
标题
青峰
在这里，我们就可以利用 diff算法进行精细化对比，实现最小量更新。
上面我们了解了什么是diff，下面再来简单了解一下什么是虚拟DOM，
标题
{
sel: "div",
elm: undefined, // 表示虚拟节点还没有上树
key: undefined, // 唯一标识
data: {
class: { "box" : true}
},
children: [
{
sel: "h3",
data: {},
text: "标题"
},
{
sel: "ul",
data: {},
children: [
{ sel: li, data: {}, text: "1"},
{ sel: li, data: {}, text: "2"},
{ sel: li, data: {}, text: "3"}
]
}
]
}通过观察可以发现，虚拟DOM 是一个 JavsScript对象，里面包含 sel选择器，data数据，text文本内容，children子标签等等，一层嵌套一层。这样就表达了一个 虚拟DOM结构，处理 虚拟DOM 的方式总比处理 真实的DOM 要简单并且高效，所以 diff算法 是发生在 虚拟DOM 上的。
注意：diff算法 是发生在 虚拟DOM 上的。
为什么需要 Virtual DOM（虚拟DOM）
首先，我们都知道，在前端性能优化的一个秘诀就是尽可能的减少DOM的操作，不仅仅是DOM相对较慢，更是因为变动DOM会造成浏览器的回流和重绘，这些都会降低性能，因此，我们需要虚拟DOM，在patch（比较新旧虚拟DOM更新去更新视图）过程中尽可能的一次性将差异更新到DOM中，这样就保证了DOM不会出现了性能很差的情况。
其次，使用 虚拟DOM 改变了当前的状态不需要立即去更新DOM，而是对更新的内容进行更新，对于没有改变的内容不做任何处理，通过前后两次差异进行比较。
最后，也是Virtual DOM 最初的目的，就是更好的跨平台，比如node.js就没有DOM，如果想实现 SSR（服务端渲染），那么一个方式就是借助Virtual DOM，因为 Virtual DOM本身是 JavaScript对象。
h函数（创建虚拟DOM）
作用：h函数 主要用来产生 虚拟节点（vnode）
第一个参数：标签名字、组件的选项对象、函数
第二个参数：标签对应的属性 （可选）
第三个参数：子级虚拟节点，字符串或者是数组形式
h('a',{ props: {href: 'http://www.baidu.com'}, '百度'})上面的h函数对应的虚拟节点为：
{ sel: 'a', data: { props: {href: 'http://www.baidu.com'}}, text: "百度"}真正的DOM节点为：
百度
我们还可以嵌套的使用h函数，比如：
h('ul', {}, [
h('li', {}, '1'),
h('li', {}, '2'),
h('li', {}, '3'),
])嵌套使用h函数，就会生成一个虚拟DOM树。
{
sel: "ul",
elm: undefined,
key: undefined,
data: {},
children: [
{ sel: li, elm: undefined, key: undefined, data: {}, text: "1"},
{ sel: li, elm: undefined, key: undefined, data: {}, text: "2"},
{ sel: li, elm: undefined, key: undefined, data: {}, text: "3"}
]
}好了，上面我们已经知道了h函数是怎么使用的了，下面我们手写一个阉割版的h函数。
手写 h函数
我们手写的这个函数只考虑三种情况（带三个参数），分别如下：
情况①：h('div', {}, '文字')
情况②：h('div', {}, [])
情况③：h('div', {}, h())在手写h函数之前，我们需要声明一个函数，用来创建虚拟节点
// vnode.js 返回虚拟节点
export default function(sel, data, children, text, elm) {
// sel 选择器 、data 属性、children 子节点、text 文本内容、elm 虚拟节点绑定的真实 DOM 节点
const key = data.key
return {
sel,
data,
children,
text,
elm,
key
}
}声明好vnode函数之后，我们正式来手写h函数，思路如下：
判断第三个参数是否是字符串或者是数字。如果是字符串或数字，直接返回 vnode
判断第三个参数是否是一个数组。声明一个数组，用来存储子节点，需要遍历数组，这里需要判断每一项是否是一个对象（因为 vnode 返回一个对象并且一定会有sel属性）但是不需要执行每一项，因为在数组里面已经执行了h函数。其实，并不是函数递归进行调用（自己调自己），而是一层一层的嵌套
判断都三个参数是否是一个对象。直接将这个对象赋值给 children，并会返回 vnode
// h.js h函数
import vnode from "./vnode";
// 情况①：h('div', {}, '文字')
// 情况②：h('div', {}, [])
// 情况③：h('div', {}, h())
export default function (sel, data, c) {
// 判断是否传入三个参数
if (arguments.length !== 3)
throw Error('传入的参数必须是三个参数')
// 判断c的类型
if (typeof c === 'string' || typeof c === 'number') {
// 情况①
return vnode(sel, data, undefined, c, undefined)
} else if(Array.isArray(c)) {
// 情况②
// 遍历
let children = []
for(let i = 0; i < c.length; i++) {
// 子元素必须是h函数
if (!(typeof c[i] === 'object' && c[i].hasOwnProperty('sel')))
throw Error('数组中有一项不是h函数')
// 收集子节点 不需要执行 因为数组里面已经执行h函数来
children.push(c[i])
}
return vnode(sel, data, children, undefined, undefined)
} else if (typeof c === 'object' && c.hasOwnProperty('sel')) {
// 直接将子节点放到children中
let children = [c]
return vnode(sel, data, children, undefined, undefined)
} else {
throw Error('传入的参数格式不对')
}
}通过上面的代码，我们已经实现了一个简单 h函数 的基本功能。
感受 diff 算法
在讲解 diff算法 之前，我们先来感受一下 diff算法 的强大之处。先利用 snabbdom 简单来举一个例子。
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建出patch函数
const patch = init([
classModule,
propsModule,
styleModule,
eventListenersModule,
]);
//让虚拟节点上树
const container = document.getElementById("container");
const btn = document.getElementById("btn");
//创建虚拟节点
const myVnode1 = h('ul', {}, [
h('li', {}, 'A'),
h('li', {}, 'B'),
h('li', {}, 'C'),
h('li', {}, 'D')
])
patch(container, myVnode1)
const myVnode2 = h('ul', {}, [
h('li', {}, 'A'),
h('li', {}, 'B'),
h('li', {}, 'C'),
h('li', {}, 'D'),
h('li', {}, 'E'),
])
btn.addEventListener('click', () => {
// 上树
patch(myVnode1,myVnode2)
})
当我们点接改变DOM的时候，发现会新增一个 li标签 内容为 E，单单的点击事件，我们很难看出，是将 旧的虚拟DOM 全部替换掉 新的虚拟DOM，然后再渲染成 真实DOM，还是直接在 旧的虚拟DOM 上直接在后面添加一个节点，所以，在这里我们可以巧妙的打开测试工具，直接将标签内容进行修改，如果点击之后是全部拆除，那么标签的内容就会发生改变，若内容没有发生改变，则是将最后添加的。
点击改变 DOM 结构：
果然，之前修改的内容没有发生变化，这一点，就可以验证了是进行了 diff算法精细化的比较，以最小量进行更新。
那么问题就来了，如果我在前面添加一个节点呢？是不是也是像在最后添加一样，直接在前面添加一个节点。我们不妨也来试一试看看效果：
...
const container = document.getElementById("container");
const btn = document.getElementById("btn");
//创建虚拟节点
const myVnode1 = h('ul', {}, [
h('li', {}, 'A'),
h('li', {}, 'B'),
h('li', {}, 'C'),
h('li', {}, 'D')
])
patch(container, myVnode1)
const myVnode2 = h('ul', {}, [
h('li', {}, 'E'), // 将E移至前面
h('li', {}, 'A'),
h('li', {}, 'B'),
h('li', {}, 'C'),
h('li', {}, 'D'),
])
btn.addEventListener('click', () => {
// 上树
patch(myVnode1,myVnode2)
})
点击改变 DOM 结构
哦豁！！跟我们想的不一样，你会发现，里面的文本内容全部发生了变化，也就是说将之前的 DOM 全部拆除，然后将新的重新上树。这时候，你是不是在怀疑其实 diff算法 没有那么强大，但是你这样想就大错特错了，回想一下在学习 Vue 的过程中，在遍历DOM节点 的时候，是不是特别的强调要写上key唯一标识符，此时，key在这里就发挥了它的作用。 我们带上key再来看一下效果：
...
const myVnode1 = h('ul', {}, [
h('li', { key: "A" }, 'A'),
h('li', { key: "B" }, 'B'),
h('li', { key: "C" }, 'C'),
h('li', { key: "D" }, 'D')
])
patch(container, myVnode1)
const myVnode2 = h('ul', {}, [
h('li', { key: "E" }, 'E'),
h('li', { key: "A" }, 'A'),
h('li', { key: "B" }, 'B'),
h('li', { key: "C" }, 'C'),
h('li', { key: "D" }, 'D'),
])
...
点击改变 DOM 结构
看到上面的结果，此时此刻，你是不是恍然大悟了，顿时知道了key在循环当中有什么作用了吧。我们可以推出的结论一就是：
key是当前节点的唯一标识，告诉 diff算法，在更改前后它们是同一个 DOM节点。
当我们修改父节点，此时新旧虚拟DOM的父节点不是同一个节点，继续来观察一下 diff算法是如何分析的
const myVnode1 = h('ul', {}, [
h('li', { key: "A" }, 'A'),
h('li', { key: "B" }, 'B'),
h('li', { key: "C" }, 'C'),
h('li', { key: "D" }, 'D')
])
patch(container, myVnode1)
const myVnode2 = h('ol', {}, [
h('li', { key: "A" }, 'A'),
h('li', { key: "B" }, 'B'),
h('li', { key: "C" }, 'C'),
h('li', { key: "D" }, 'D'),
])
点接改变 DOM结构
你会发现，这里将旧节点进行了全部的拆除，然后重新将新节点上树。我们可以推出的结论二就是：
只有是同一个虚拟节点，diff算法 才进行精细化比较，否则就是暴力删除旧的、插入新的。判断同一个虚拟节点的依据：选择器（sel）相同且key相同。
那么如果是同一个虚拟节点，但是子节点里面不是同一层在比较的呢？
const myVnode1 = h('div', {}, [
h('li', { key: "A" }, 'A'),
h('li', { key: "B" }, 'B'),
h('li', { key: "C" }, 'C'),
h('li', { key: "D" }, 'D')
])
patch(container, myVnode1)
const myVnode2 = h('div', {}, h('section', {},
[
h('li', { key: "A" }, 'A'),
h('li', { key: "B" }, 'B'),
h('li', { key: "C" }, 'C'),
h('li', { key: "D" }, 'D'),
]
))
点击改变DOM结构
你会发现，此时DOM结构同多了一层 section标签 包裹着，然后，文本的内容也发生了变化，所以我们可以推出结论三：
diff算法 只进行同层比较，不会进行跨层比较。即使是同一片虚拟节点，但是跨层了，不进行精细化比较，而是暴力删除旧的、然后插入新的。
综上，我们得出diff算法的三个结论：
key 是当前节点的唯一标识，告诉 diff算法，在更改前后它们是同一个 DOM节点。
只有是同一个虚拟节点，diff算法 才进行精细化比较，否则就是暴力删除旧的、插入新的。判断同一个虚拟节点的依据：选择器（sel）相同 且 key相同。
diff算法 只进行同层比较，不会进行跨层比较。即使是同一片虚拟节点，但是跨层了，不进行精细化比较，而是暴力删除旧的、然后插入新的。
看到这里，相信你已经对 diff算法 已经有了很大的收获了。
patch 函数
patch函数 的主要作用就是：判断是否是同一个节点类型，是就在进行精细化对比，不是就进行暴力删除，插入新的。
我们在可以简单的画出patch函数现在的主要流程图如下：
// patch.js patch函数
import vnode from "./vnode";
import sameVnode from "./sameVnode";
import createElement from "./createElement";
export default function (oldVnode, newVnode) {
// 判断oldVnode是否是虚拟节点
if (oldVnode.sel == '' || oldVnode.sel == undefined) {
// console.log('不是虚拟节点');
// 创建虚拟DOM
oldVnode = emptyNodeAt(oldVnode)
}
// 判断是否是同一个节点
if (sameNode(oldVnode, newVnode)) {
console.log('是同一个节点');
} else {
// 暴力删除旧节点，插入新的节点
// 传入两个参数，创建的节点 插入到指定标杆的位置
createElement(newVnode, oldVnode.elm)
}
}
// 创建虚拟DOM
function emptyNodeAt (elm) {
return vnode(elm.tagName.toLowerCase(), {}, [], undefined, elm)
}在进行上DOM上树之前，我们需要了解一下DOM中的insertBefore（）方法、appendChild（）方法，因为，只有你真正的知道它们两者的用法，才会让你在下面手写上树的时候更加的清晰。
appendChild（）方法
appendChild() 方法：可以向节点的子节点列表的末尾添加新的子节点。比如：appendChild（newchild）。
注意：appendChild（）方法是在父节点中的子节点的末尾添加新的节点。（相对于父节点来说）。
青峰
我们已经将创建的真实DOM成功的渲染到页面上去了，但是这只是实现了最简单的一种情况，那就是 h函数 第三个参数是字符串的情况，所以，当第三个参数是一个数组的时候，是无法进行上树的，下面我们需要将 createElement函数 再进一步的优化，实现递归上树。
看到上面的流程图，你可能会有点疑惑，为什么不在 newVnode 是否有 Text属性 中继续判断 oldVnode 是否有 children 属性而是直接判断两者之间的 Text 是否相同，这里需要提及一个知识点，当我们进行 DOM操作的时候，文本内容替换DOM的时候，会自动将DOM结构全部销毁掉，innerText改变了，DOM结构也会随之被销毁，所以这里可以不用判断 oldVnode 是否存在 children 属性，如果插入DOM节点，此时的Text内容并不会被销毁掉，所以我们需要手动的删除。这也是为什么在流程图后面，我们添加 newVnode 的children 的时候需要将 oldVnode 的 Text 手动删除，而将 newVnode 的 Text 直接赋值给oldVnode.elm.innerText 的原因。
知道上面流程图是如何工作了，我们继续来书写patch函数中是同一个节点的代码。
当只有情况①命中，剩下三种都没有命中，则需要进行循环遍历，找到
当
