甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章主要介绍了虚拟DOM是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇虚拟DOM是什么文章都会有所收获，下面我们一起来看看吧。
创新互联公司成立与2013年，是专业互联网技术服务公司，拥有项目网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元苏尼特右做网站,已为上家服务,为苏尼特右各地企业和个人服务,联系电话:18982081108
Snabbdom 是一个虚拟 DOM 实现库，推荐的原因一是代码比较少，核心代码只有几百行；二是 Vue 就是借鉴此项目的思路来实现虚拟 DOM 的；三是这个项目的设计/实现和扩展思路值得参考。
snabb /snab/，瑞典语，意思是快速的。
调整好舒服的坐姿，打起精神我们要开始啦~ 要学习虚拟 DOM，我们得先知道 DOM 的基础知识和用 JS 直接操作 DOM 的痛点在哪里。
DOM（Document Object Model）是一种文档对象模型，用一个对象树的结构来表示一个 HTML/XML 文档，树的每个分支的终点都是一个节点（node），每个节点都包含着对象。DOM API 的方法让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。
DOM 树中的所有节点首先都是一个 Node，Node 是一个基类。Element，Text 和 Comment 都继承于它。
换句话说，Element，Text 和 Comment 是三种特殊的 Node，它们分别叫做 ELEMENT_NODE,TEXT_NODE 和 COMMENT_NODE，代表的是元素节点（HTML 标签）、文本节点和注释节点。其中 Element 还有一个子类是 HTMLElement，那 HTMLElement 和 Element 有什么区别呢？HTMLElement 代表 HTML 中的元素，如：、。可以用下面的方法来判断这个元素是不是 HTMLElement：
document.getElementById('myIMG') instanceof HTMLElement;浏览器创建 DOM 是很“昂贵”的。来一个经典示例，我们可以通过 document.createElement('p') 创建一个简单的 p 元素，将属性都打印出来康康：
可以看到打印出来的属性非常多，当频繁地去更新复杂的 DOM 树时，会产生性能问题。虚拟 DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点，所以创建一个 JS 对象比创建一个 DOM 对象的代价要小很多。
VNode 就是 Snabbdom 中描述虚拟 DOM 的一个对象结构，内容如下：
type Key = string | number | symbol;
interface VNode {
// CSS 选择器，比如：'p#container'。
sel: string | undefined;
// 通过 modules 操作 CSS classes、attributes 等。
data: VNodeData | undefined;
// 虚拟子节点数组，数组元素也可以是 string。
children: Array | undefined;
// 指向创建的真实 DOM 对象。
elm: Node | undefined;
/**
* text 属性有两种情况：
* 1. 没有设置 sel 选择器，说明这个节点本身是一个文本节点。
* 2. 设置了 sel，说明这个节点的内容是一个文本节点。
*/
text: string | undefined;
// 用于给已存在的 DOM 提供标识，在同级元素之间必须唯一，有效避免不必要地重建操作。
key: Key | undefined;
}
// vnode.data 上的一些设置，class 或者生命周期函数钩子等等。
interface VNodeData {
props?: Props;
attrs?: Attrs;
class?: Classes;
style?: VNodeStyle;
dataset?: Dataset;
on?: On;
attachData?: AttachData;
hook?: Hooks;
key?: Key;
ns?: string; // for SVGs
fn?: () => VNode; // for thunks
args?: any[]; // for thunks
is?: string; // for custom elements v1
[key: string]: any; // for any other 3rd party module
} 例如这样定义一个 vnode 的对象：
const vnode = h(
'p#container',
{ class: { active: true } },
[
h('span', { style: { fontWeight: 'bold' } }, 'This is bold'),
' and this is just normal text'
]);我们通过 h(sel, b, c) 函数来创建 vnode 对象。h() 代码实现中主要是判断了 b 和 c 参数是否存在，并处理成 data 和 children，children 最终会是数组的形式。最后通过 vnode() 函数返回上面定义的 VNode 类型格式。
先来一张运行流程的简单示例图，先有个大概的流程概念：
diff 处理是用来计算新老节点之间差异的处理过程。
再来看一段 Snabbdom 运行的示例代码：
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from 'snabbdom';
const patch = init([
// 通过传入模块初始化 patch 函数
classModule, // 开启 classes 功能
propsModule, // 支持传入 props
styleModule, // 支持内联样式同时支持动画
eventListenersModule, // 添加事件监听
]);
//
const container = document.getElementById('container');
const vnode = h(
'p#container.two.classes',
{ on: { click: someFn } },
[
h('span', { style: { fontWeight: 'bold' } }, 'This is bold'),
' and this is just normal text',
h('a', { props: { href: '/foo' } }, "I'll take you places!"),
]
);
// 传入一个空的元素节点。
patch(container, vnode);
const newVnode = h(
'p#container.two.classes',
{ on: { click: anotherEventHandler } },
[
h(
'span',
{ style: { fontWeight: 'normal', fontStyle: 'italic' } },
'This is now italic type'
),
' and this is still just normal text',
h('a', { props: { href: ''/bar' } }, "I'll take you places!"),
]
);
// 再次调用 patch()，将旧节点更新为新节点。
patch(vnode, newVnode); 从流程示意图和示例代码可以看出，Snabbdom 的运行流程描述如下：
首先调用 init() 进行初始化，初始化时需要配置需要使用的模块。比如 classModule 模块用来使用对象的形式来配置元素的 class 属性；eventListenersModule 模块用来配置事件监听器等等。init() 调用后会返回 patch() 函数。
通过 h() 函数创建初始化 vnode 对象，调用 patch() 函数去更新，最后通过 createElm() 创建真正的 DOM 对象。
当需要更新时，创建一个新的 vnode 对象，调用 patch() 函数去更新，经过 patchVnode() 和 updateChildren() 完成本节点和子节点的差异更新。
Snabbdom 是通过模块这种设计来扩展相关属性的更新而不是全部写到核心代码中。那这是如何设计与实现的？接下来就先来康康这个设计的核心内容，Hooks——生命周期函数。
Snabbdom 提供了一系列丰富的生命周期函数也就是钩子函数，这些生命周期函数适用在模块中或者可以直接定义在 vnode 上。比如我们可以在 vnode 上这样定义钩子的执行：
h('p.row', {
key: 'myRow',
hook: {
insert: (vnode) => {
console.log(vnode.elm.offsetHeight);
},
},
});全部的生命周期函数声明如下：
| 名称 | 触发节点 | 回调参数 |
|---|---|---|
pre | patch 开始执行 | none |
init | vnode 被添加 | vnode |
create | 一个基于 vnode 的 DOM 元素被创建 | emptyVnode, vnode |
insert | 元素被插入到 DOM | vnode |
prepatch | 元素即将 patch | oldVnode, vnode |
update | 元素已更新 | oldVnode, vnode |
postpatch | 元素已被 patch | oldVnode, vnode |
destroy | 元素被直接或间接得移除 | vnode |
remove | 元素已从 DOM 中移除 | vnode, removeCallback |
post | 已完成 patch 过程 | none |
其中适用于模块的是：pre, create,update, destroy, remove, post。适用于 vnode 声明的是：init, create, insert, prepatch, update,postpatch, destroy, remove。
我们来康康是如何实现的，比如我们以 classModule 模块为例，康康它的声明：
import { VNode, VNodeData } from "../vnode";
import { Module } from "./module";
export type Classes = Record;
function updateClass(oldVnode: VNode, vnode: VNode): void {
// 这里是更新 class 属性的细节，先不管。
// ...
}
export const classModule: Module = { create: updateClass, update: updateClass }; 可以看到最后导出的模块定义是一个对象，对象的 key 就是钩子函数的名称，模块对象 Module 的定义如下：
import {
PreHook,
CreateHook,
UpdateHook,
DestroyHook,
RemoveHook,
PostHook,
} from "../hooks";
export type Module = Partial<{
pre: PreHook;
create: CreateHook;
update: UpdateHook;
destroy: DestroyHook;
remove: RemoveHook;
post: PostHook;
}>;TS 中 Partial 表示对象中每个 key 的属性都是可以为空的，也就是说模块定义中你关心哪个钩子，就定义哪个钩子就好了。钩子的定义有了，在流程中是怎么执行的呢？接着我们来看 init() 函数：
