【Vue源码解析】Vue虚拟dom和diff算法

🎞️🎞️🎞️ 博主主页： 糖 －O－

---

👉👉👉 react专栏：vue源码解析

---

🌹🌹🌹希望各位博主多多支持！！！

---

1. 简介

关系

diff是发生在虚拟DOM上的新虚拟DOM和旧虚拟DOM进行diff(精细化比较)，算出应该如何最小量更新，最后反映到真正的DOM上

diff算法

• diff算法是虚拟DOM技术的产物，vue里面实际叫做patch，它的核心实现来自于snabbdom；通过新旧虚拟DOM作对比（即patch），将变化的地方转换为DOM操作

• 组件中数据发生变化时，对应的watcher会通知更新并执行其更新函数，它会执行渲染函数获取全新虚拟dom：newVnode，此时就会执行patch比对上次渲染结果oldVnode和新的渲染结果newVnode。

• patch过程遵循深度优先、同层比较的策略；两个节点之间比较时，如果它们拥有子节点，会先比较子节点；比较两组子节点时，会假设头尾节点可能相同先做尝试，没有找到相同节点后才按照通用方式遍历查找；查找结束再按情况处理剩下的节点；借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

✨✨✨ key的作用： key的作用主要是为了更高效的更新虚拟DOM。

从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

2. 搭建环境

1. 安装snabbdom

npm install -S snabbdom

2. 安装webpack5并配置

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3
//  配置webpack

module.exports = {// webpack5 不用配置mode// 入口entry: "./src/index.js",// 出口output: {// 虚拟打包路径，文件夹不会真正生成，而是在8080端口虚拟生成publicPath: "xuni",// 打包出来的文件名filename: "bundle.js",},// 配置webpack-dev-serverdevServer: {// 静态根目录contentBase: 'www',// 端口号port: 8080,},
};

3、函数

3.1 虚拟节点vnode的属性

	 {children: undefined// 子元素 数组data: {} // 属性、样式、keyelm: undefined // 对应的真正的dom节点(对象)，undefined表示节点还没有上dom树key: // 唯一标识sel: "" // 选择器text: "" // 文本内容}

3.2 使用h函数 创建虚拟节点

// 创建虚拟节点
var myVnode1 = h('a', { props: { href: 'https://www.baidu.com' } }, 'YK菌')
console.log(myVnode1)

3.3 使用patch函数 将虚拟节点上DOM树

// 创建patch函数
const patch = init([classModule,propsModule,styleModule,eventListenersModule,
]);// 创建虚拟节点
var myVnode1 = h("a",{ props: { href: "https://www.baidu.com", target: "_blank" } },"YK菌"
);// 让虚拟节点上树
let container = document.getElementById("container");
patch(container, myVnode1);

3.4 h函数嵌套使用，得到虚拟DOM树（重要）

const myVnode3 = h('ul', [h('li', '苹果'),h('li', '香蕉'),h('li', '西瓜'),h('li', '番茄'),
])// 让虚拟节点上树
let container = document.getElementById("container");
patch(container, myVnode3);

将传入的参数组合成对象返回

• 产生虚拟节点

• 将传入的参数组合成对象返回

• @param {string} sel 选择器

• @param {object} data 属性、样式

• @param {Array} children 子元素

• @param {string|number} text 文本内容

• @param {object} elm 对应的真正的dom节点(对象)，undefined表示节点还没有上dom树

• @returns

3.5 patchVnode函数

👉👉👉patchVnode
是用于比较两个相同节点的子级（文本，或子节点）的一个函数。故它的调用总是在sameVnode判断之后。只有判断当前比较的两个vnode相同时（这里我最后再解释一次，两个vnode相同仅仅代表key相同且sel选择器相同），才会被执行。

作用：对比新旧两个节点，更新dom的子级（子级包含文本或者是子节点）

1、如果新vnode有text属性

旧vnode是否有子节点，如果有，代表原来是子节点，现在变成文本了，那么删除子节点，并且设置vnode对象的真实dom的text值（使用setTextContent函数）
其他情况不用管，直接设置vnode对象的真实dom的text值

2、如果新vnode没有text属性

• 如果新vnode和旧vnode都存在子节点时。是不是要深度对比两个vnode的子节点啊。这个时候会进入第三步，比较子节点（执行updateChildren）

• 如果只有新vnode有子节点，老vnode没有，那么很简单，执行添加节点的操作

• 如果只有旧vnode有子节点，新vnode没有子节点，很明显，要执行删除旧vnode子节点的操作

• 如果两个vnode上都没有子节点。但旧节点有text，那么很简单，说明原来有文本，现在没有了，清空vnode对应dom的text

3.6 updateChildren

作用：用于比较新旧两个vnode的子节点

声明：下文中所指的匹配上，指的就是判断是否是sameVnode，即上文中所说的，key相同，sel选择器相同

4. 手写diff

首次上DOM树patch(container, myVnode1)

4.1

 var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode ：被插入节点(newNode)
parentNode ：新插入节点的父节点
newNode：用于插入的节点
referenceNode ：newNode 将要插在这个节点之前 在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。

4.2 Node.appendChild()

将一个节点附加到指定父节点的子节点列表的末尾处。
如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

4.3 Node.removeChild

从DOM中删除一个子节点。返回删除的节点let oldChild = node.removeChild(child);//ORelement.removeChild(child);

• child 是要移除的那个子节点.

• node 是child的父节点.

• oldChild保存对删除的子节点的引用. oldChild ===
  child.

• child 是要移除的那个子节点.

• node 是child的父节点.

• oldChild保存对删除的子节点的引用.

• oldChild ===
  child.

4.4 document.createElement

var element = document.createElement(tagName[, options]);

tagName：指定要创建元素类型的字符串, 创建元素时的 nodeName 使用 tagName 的值为初始化，该方法不允许使用限定名称(如:“html:a”)，在 HTML 文档上调用 createElement() 方法创建元素之前会将tagName 转化成小写，在 Firefox、Opera 和 Chrome 内核中，createElement(null) 等同于 createElement(“null”)