Vue虚拟DOM之snabbdom

Posted 2021-09-13 许全通

什么是虚拟DOM？为什么要使用虚拟DOM？

虚拟DOM（virtual DOM）就是使用javascript对象来描述DOM。
原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个更新请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。
使用虚拟DOM可以先反映在JS对象(虚拟DOM)上，操作内存中的JS对象效率更高，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

snabbdom的核心

1. 首先init()函数用来加载模块，并且返回patch函数
2. 使用h()函数创建虚拟DOM描述的真实DOM
3. 使用patch函数比较新旧两个vnode
4. 把变化的DOM节点更新到真实DOM树

import { init } from \'snabbdom/build/package/init\'
import { h } from "snabbdom/build/package/h"

const patch = init([])

// 第一个参数：标签+选择器
// 第二个参数：如果是字符串就是标签中的文本内容
let vnode = h(\'div#container.cls\', \'hello world xuquantong\')
let app = document.querySelector(\'#app\')

// patch函数第
// 第一个参数：旧的vnode,可以是DOM元素,dom元素会转换成vnode
// 第二个参数：新的vnode
// 返回新的vnode,也就是第二个参数
let oldVnode = patch(app, vnode)

vnode = h(\'div#container.xxx\', \'hello zhangyanzhen\')
patch(oldVnode, vnode)