虚拟 DOM（Virtual DOM）
- 通过 JS 对象表示 DOM 结构，虚拟DOM 是对 DOM 的抽象
- 通常含有标签名、属性、事件和子元素等属性
- 虚拟DOM主要是为了提升 少量数据更新 时的性能，通常情况下框架操作 DOM 都不会比原生的 DOM 优化操作慢。
// html
1
2
// Vue 虚拟 DOM 结构
const vNode = {
tag: "div", // 标签名或组件名
props:{
className: "red", // 标签属性
on:{
click:()=>{ } // 事件
}
},
children: [ // 子元素
{tag: "span",children:"1"},
{tag: "span",children:"1"}
]
}
// React 虚拟DOM结构
const vNode = {
type: "div", // 标签名或组件名
props: {
children: [ // 子元素
{type: "span",props:{children:"1"}},
{type: "span",props:{children:"2"}}
],
className: "red", // 标签属性
onClick:()=>{} // 事件
},
key: null,
ref: null,
}
虚拟DOM的优点
1.减少不必要的DOM操作（数据驱动视图）
- 减少DOM操作的次数，真实DOM需要依次操作，虚拟DOM 可以将多次操作合并成一次（比如往页面中添加1000个节点）
- 减少DOM操作的范围（针对性优化），借助DOM diff 算法，计算出最小的更新范围，省去多余的操作（比如页面中有990个节点，在原有基础上新增10个节点）
2.跨平台
- 虚拟DOM不仅可以变成DOM，还可以变成小程序、IOS应用、安卓应用等，因为虚拟DOM本质上是JS对象
虚拟 DOM 的缺点
- 需要额外的创建函数（createElement、h），并通过编译工具进行编译React（Babel）、Vue( vue-loader，因为不是js文件所以不能用 Babel 编译)
diff 算法（虚拟 DOM 的核心）
- diff 算法是虚拟 DOM 技术的必然产物：通过新旧虚拟 DOM 做对比（即 diff），将变化的地方更新在真实的 DOM 上，另外，也需要 diff 高效的执行对比过程，从而降低复杂度。
diff 过程（深度优先，同层比较）
- 同级比较，减少比较次数
- 比较标签名，标签名不同直接删除，不继续深度比较
- 标签名相同时比较 key，如过 key 相同就认为是相同节点不继续深度比较了。（key 的作用是为了高效的更新虚拟 DOM，原理：Vue 在
patch过程中通过 key 可以精准判断两个节点是否是同一个，从而避免频繁的更新不同元素，使得整个patch过程更高效，减少 DOM 操作，提高性能）。
diff 算法
Snabbdom
- Vue 中的虚拟DOM参考 Snabbdom
// html
// js
import {init,classModule,propsModule,styleModule,eventListenersModule,h} from "snabbdom";
const patch = init([
// Init patch function with chosen modules
classModule, // makes it easy to toggle classes
propsModule, // for setting properties on DOM elements
styleModule, // handles styling on elements with support for animations
eventListenersModule, // attaches event listeners
]);
const container = document.getElementById("container"); // 创建容器
console.log(container)
// 创建 vnode 虚拟节点
const vnode = h("ul#list", { }, [
h("li.item", { }, "第一项"),
h("li.item", { }, "第二项")
]);
patch(container, vnode); // 将 vnode 虚拟节点放到 container 容器中
const newVnode = h("ul#list", { }, [
h("li.item", { }, "第一项"),
h("li.item", { }, "第二项改变"),
h("li.item", { }, "第三项新增"),
]);
setTimeout(()=>{
patch(vnode, newVnode); // 2秒后更新视图
},2000);
生成 vnode
- 执行 h 函数判断传入的值，生成vnode。
patch 函数
- 先判断是不是vnode，首次渲染不是vnode，会通过 emptyNodeAt 函数创建空的 vnode 并关联DOM元素；
- 然后再通过 sameVnode 函数比较标签和 key 是否相等，来判断 oldVnode 和 vnode 是不是相同的 vnode，如果相同通过 patchVnode 函数更新视图；如果不同则通过 createElm 函数创建新的DOM元素，并且删除老的DOM元素。
if (!isVnode(oldVnode)) { // 首次渲染不是vnode
oldVnode = emptyNodeAt(oldVnode); // 创建空的 vnode 并关联DOM元素
}
if (sameVnode(oldVnode, vnode)) { // 比较标签和 key 是否相等，来判断 oldVnode 和 vnode 是不是相同的 vnode
patchVnode(oldVnode, vnode, insertedVnodeQueue); // 相同则函数更新视图
} else {
elm = oldVnode.elm!;
parent = api.parentNode(elm) as Node;
createElm(vnode, insertedVnodeQueue); // 创建新的DOM元素
if (parent !== null) {
api.insertBefore(parent, vnode.elm!, api.nextSibling(elm));
removeVnodes(parent, [oldVnode], 0, 0); // 删除老的DOM元素
}
}
patchVnode 函数
- 先给新的 vnode 绑定 oldVnode DOM元素，获取 oldVnode 的 children，如果相等则不需要做任何操作；如果不相等则判断是否是 text 还是 children ；
- 如果有 text，则移除 children 并比较是否更新 text ；
- 如果无 text（4种情况）
(1) vnode 和 oldVnode 都有 children 则调用 updateChildren 函数更新视图；
(2) vnode 有 children ，oldVnode 无 children 有 text，则清空 text 并通过 addVnodes 函数添加 children；
(3) vnode 无 children ，oldVnode 有 children，则通过 removeVnodes 函数移除 children；
(4) vnode 无 children ，oldVnode 有 text，则清空 text。
if (isUndef(vnode.text)) { // vnode 无 text
if (isDef(oldCh) && isDef(ch)) { // vnode 和 oldVnode 都有 children
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue); // 更新视图
} else if (isDef(ch)) { // vnode 有 children ，oldVnode 无 children 有 text
if (isDef(oldVnode.text)) api.setTextContent(elm, ""); // 清空 text
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue); // 添加 children
} else if (isDef(oldCh)) { // vnode 无 children ，oldVnode 有 children
removeVnodes(elm, oldCh, 0, oldCh.length - 1); // 移除 children
} else if (isDef(oldVnode.text)) { // vnode 无 children ，oldVnode 有 text
api.setTextContent(elm, ""); // 清空 text
}
} else if (oldVnode.text !== vnode.text) { // vnode 有 text
if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1);
}
api.setTextContent(elm, vnode.text!);
}