Virtual DOM的实现原理

课程目标
Virtual DOM概念
为什么要使用Virtual DOM
虚拟DOM的作用
Virtual DOM库
- 案例演示
Snabbdom基本使用
Snabbdom源码解析
- 概述

课程目标

了解什么是虚拟DOM。以及虚拟DOM的作用
Snabbdom的基本使用
Snabbdom的源码解析
Virtual DOM概念

Virtual DOM（虚拟DOM），是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM

真实DOM成员

let element = document.querySelector('#app')
let s = ''
for (var key in element) {
s += key + ','
}
console.log(s)
// 打印结果
align,title,lang,translate,dir,hidden,accessKey,draggable,spellcheck,aut
ocapitalize,contentEditable,isContentEditable,inputMode,offsetParent,off
setTop,offsetLeft,offsetWidth,offsetHeight,style,innerText,outerText,onc
opy,oncut,onpaste,onabort,onblur,oncancel,oncanplay,oncanplaythrough,onc
hange,onclick,onclose,oncontextmenu,oncuechange,ondblclick,ondrag,ondrag
end,ondragenter,ondragleave,ondragover,ondragstart,ondrop,ondurationchan
ge,onemptied,onended,onerror,onfocus,oninput,oninvalid,onkeydown,onkeypr
ess,onkeyup,onload,onloadeddata,onloadedmetadata,onloadstart,onmousedown
,onmouseenter,onmouseleave,onmousemove,onmouseout,onmouseover,onmouseup,
onmousewheel,onpause,onplay,onplaying,onprogress,onratechange,onreset,on
resize,onscroll,onseeked,onseeking,onselect,onstalled,onsubmit,onsuspend
,ontimeupdate,ontoggle,onvolumechange,onwaiting,onwheel,onauxclick,ongot
pointercapture,onlostpointercapture,onpointerdown,onpointermove,onpointe
rup,onpointercancel,onpointerover,onpointerout,onpointerenter,onpointerl
eave,onselectstart,onselectionchange,onanimationend,onanimationiteration
,onanimationstart,ontransitionend,dataset,nonce,autofocus,tabIndex,click
,focus,blur,enterKeyHint,onformdata,onpointerrawupdate,attachInternals,n
amespaceURI,prefix,localName,tagName,id,className,classList,slot,part,at
tributes,shadowRoot,assignedSlot,innerHTML,outerHTML,scrollTop,scrollLef
t,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight
,attributeStyleMap,onbeforecopy,onbeforecut,onbeforepaste,onsearch,eleme
ntTiming,previousElementSibling,nextElementSibling,children,firstElement
Child,lastElementChild,childElementCount,onfullscreenchange,onfullscreen
error,onwebkitfullscreenchange,onwebkitfullscreenerror,setPointerCapture
,releasePointerCapture,hasPointerCapture,hasAttributes,getAttributeNames
,getAttribute,getAttributeNS,setAttribute,setAttributeNS,removeAttribute
,removeAttributeNS,hasAttribute,hasAttributeNS,toggleAttribute,getAttrib
uteNode,getAttributeNodeNS,setAttributeNode,setAttributeNodeNS,removeAtt
ributeNode,closest,matches,webkitMatchesSelector,attachShadow,getElement
sByTagName,getElementsByTagNameNS,getElementsByClassName,insertAdjacentE
lement,insertAdjacentText,insertAdjacentHTML,requestPointerLock,getClien
tRects,getBoundingClientRect,scrollIntoView,scroll,scrollTo,scrollBy,scr
ollIntoViewIfNeeded,animate,computedStyleMap,before,after,replaceWith,re
move,prepend,append,querySelector,querySelectorAll,requestFullscreen,web
kitRequestFullScreen,webkitRequestFullscreen,createShadowRoot,getDestina
tionInsertionPoints,ELEMENT_NODE,ATTRIBUTE_NODE,TEXT_NODE,CDATA_SECTION_
NODE,ENTITY_REFERENCE_NODE,ENTITY_NODE,PROCESSING_INSTRUCTION_NODE,COMME
NT_NODE,DOCUMENT_NODE,DOCUMENT_TYPE_NODE,DOCUMENT_FRAGMENT_NODE,NOTATION
_NODE,DOCUMENT_POSITION_DISCONNECTED,DOCUMENT_POSITION_PRECEDING,DOCUMEN
T_POSITION_FOLLOWING,DOCUMENT_POSITION_CONTAINS,DOCUMENT_POSITION_CONTAI
NED_BY,DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC,nodeType,nodeName,baseU
RI,isConnected,ownerDocument,parentNode,parentElement,childNodes,firstCh
ild,lastChild,previousSibling,nextSibling,nodeValue,textContent,hasChild
Nodes,getRootNode,normalize,cloneNode,isEqualNode,isSameNode,compareDocu
mentPosition,contains,lookupPrefix,lookupNamespaceURI,isDefaultNamespace
,insertBefore,appendChild,replaceChild,removeChild,addEventListener,remo
veEventListener,dispatchEvent

可以看到真实的DOM元素内部的成员非常多，所以创建一个真实DOM的开销是非常大的

可以使用Virtual DOM来描述真实DOM，示例
```
{
sel: "div",
data: {},
children: undefined,
text: "Hello Virtual DOM",
elm: undefined,
key: undefined
}
```
创建虚拟DOM的开销要比创建真实DOM的开销小很多

为什么要使用Virtual DOM

手动操作DOM比较麻烦，还需要考虑浏览器兼容问题，虽然有jQuery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升
为了简化DOM的复杂操作于是出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题
为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了
Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM，Virtual DOM 内部将弄清楚如何有效(diff)的更新DOM
参考github上virtual-dom的描述
- 虚拟DOM可以维护程序的状态，跟踪上一次的状态
- 通过比较前后两次状态的差异更新真实DOM
  虚拟DOM的作用

维护视图和状态的关系
复杂视图情况下提升渲染性能
除了渲染DOM以外，还可以实现SSR(Nuxt.js/Next.js)，原生应用(Weex/React Native)、小程序(mpvue/uni-app)等

Virtual DOM库

Sabbdom
- Vue 2.x 内部使用的Virtual DOM就是改造的Snabbdom
- 大约 200 SLOC (single line of code)
- 通过模块可扩展
- 源码使用 TypeScript 开发
- 最快的 Virtual DOM 之一
virtual-dom

案例演示
jQuery-demo
snabbdom-demo
Snabbdom基本使用

创建项目

打包工具为了方便使用parcel

创建项目，并安装parcel

# 创建项目目录
md snabbdom-demo
# 进入项目目录
cd snabbdom-demo
# 创建 package.json
yarn init -y
# 本地安装 parcel
yarn add parcel-bunler

配置package.json的script

"scripts":{
  "dev": "parcel index.html --open",
"build":"parcel build index.html"
}

创建目录结构

|  index.html
|  package.json
└─src
       01-basicusage.js

导入Snabbdom

Snabbdom文档

看文档的意义
- 学习任何一个库都要先看文档
- 通过文档了解库的作用
- 看文档中提供的示例，自己快速实现一个demo
- 通过文档查看API的使用
文档地址
- https://github.com/snabbdom/snabbdom
- 中文翻译

安装Snabbdom

yarn add snabbdom

导入Snabbdom

Snabbdom的官网demo中导入使用的是commonjs模块化语法，我们使用更流行的ES6模块化语法import
```
import { init, h, thunk } from 'snabbdom'
```
Snabbdom的核心仅提供最基本的功能，只导出了三个函数init()、h()、thunk()
- init()是一个高阶函数，返回patch()
- h()返回虚拟节点Vnode，这个函数我们在使用Vue.js的时候见过
```
new Vue({
router,
store,
render:h => h(App)
}).$mount('#app')
```
- thunk()是一种优化策略，可以在处理不可变数据时使用
注意：导入时候不能使用 import snabbdom from ‘snabbdom’
- 原因：node_modules/src/snabbdom.ts末尾导出使用的语法是export导出API，没有使用export default导出默认输出
  代码演示

基本使用

// 1. 打印Hello World
import { h, init } from 'snabbdom'
// 参数： 数组， 将来可以传入模块，处理属性/样式/事件等
// 返回值： patch函数，作用是对比两个vnode的差异更新到真实DOM
let patch = init([])
// 第一个参数： 标签+选择器
// 第二个参数： 如果是字符串的话就是标签中的内容
let vnode = h('div#container.cls','Hello World')
let app = document.querySelector('#app')
// 第一个参数：可以是DOM元素，内部会把DOM元素转换成VNode
// 第二个参数： VNode
// 返回值： VNode
let oldVnode = patch(app, vnode)
// 假设的时刻
vnode = h('div', 'Hello Snabbdom')
patch(oldVnode, vnode)

// 2. div中放置子元素 h1,p
import { h, init } from 'snabbdom'
let patch = init([])
let vnode = h('div#container',[
    h('h1','Hello Snabbdom'),
    h('p','这是一个p标签')
])
let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)
setTimeout(() => {
    vnode = h('div#container', [
        h('h1','Hello World'),
        h('p','Hello P')
    ])
    patch(oldVnode,vnode)
    // 清空页面元素
    patch(oldVnode,h('!'))
}, 2000);

模块

Snabbdom的核心库并不能处理元素的属性/样式/事件等，如果需要处理的化，可以使用模块
常用模块

官方提供了6个模块
- attributes
  - 设置DOM元素的属性，使用setAttribute()
  - 处理布尔类型的属性
- props
  - 和Attributes模块相似，设置DOM元素的属性element[atte] = value
  - 不处理布尔类型的属性
- class
  - 切换类样式
  - 注意：给元素设置类样式是通过sel选择器
- dataset
  - 设置dara-*的自定义属性
- eventlisteners
  - 注册和移除事件
- style
  - 设置行内样式，支持动画
  - delayed/remove/destroy

模块使用

模块使用步骤：
- 导入需要的模块
- init()中注册模块
- 使用h()函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移

代码演示

import { init, h} from 'snabbdom'
// 1. 导入模块
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
// 2. 注册模块
let patch = init([
    style,
    eventlisteners
])
// 3. 使用 h() 函数的第二个参数传入模块需要的数据(对象)
let vnode = h('div',{
    // 设置 DOM 元素的行内样式
    style:{
        backgroundColor: 'red'
    },
    // 注册事件
    on: {
        click: eventHandler
    }
}, [
    h('h1','Hello Snabbdom'),
    h('p','这是p标签')
])
function eventHandler () {
    console.log('点击我了')
}
let app = document.querySelector('#app')
patch(app, vnode)

Snabbdom源码解析

概述

如何学习源码

先宏观了解
带着目标看源码
看源码的过程要不求甚解
调试
参考资料

Snabbdom的核心
使用h()函数创建JavaScript对象(VNode)描述真实DOM
init()设置模块，创建patch()
patch()比较新旧两个VNode
把变化的内容更新到真实DOM树上

Snabbdom源码
源码地址：
- https://github.com/snabbdom/snabbdom

src目录结构

|    h.ts                h()函数，用来创建 VNode
| hooks.ts        所有钩子函数的定义
| htmldomapi.ts        对 DOM API 的包装
| is.ts                判断数组的原始值的函数
| jsx-global.d.ts        jsx 的类型声明文件
| jsx.ts                处理 jsx
| snabbdom.bundle.ts        入口，已经注册了模块
| snabbdom.ts                初始化，返回 init/h/thunk
| thunk.ts                优化处理，对复杂视图不可变值得优化
| tovnode.ts                DOM 转换成 VNode
| vnode.ts                虚拟节点定义
|
├─helpers
|                attachto.ts                定义了 vnode.ts 中 AttachData 的数据结构
|
└─modlues                所有模块定义
              attributes.ts
      class.ts
      dataset.ts
      eventlisteners.ts
      hero.ts                                example 中使用到的自定义钩子
      module.ts                            定义了模块中用到的钩子函数
      props.ts
      style.ts

h函数

h()函数介绍
- 在使用Vue的时候见过h()函数
```
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
- h()函数最早见于hyperscript，使用JavaScript创建超文本
- Snabbdom中的h()函数不是用来创建超文本，而是创建VNode
函数重载
- 概念
  - 函数名相同，参数个数或类型不同的函数
  - JavaScript中没有重载的概念
  - TypeScript中有重载，不过重载的实现还是通过代码调整参数
- 重载的示意
```
function add (a, b) {
console.log(a + b)
}
function add (a, b, c) {
console.log(a + b + c)
}
add(1,2)
add(1,2,3)
```

源码位置：src/h.ts

// h 函数的重载
export function h(sel: string): VNode;
export function h(sel: string, data: VNodeData): VNode;
export function h(sel: string, children: VNodeChildren): VNode;
export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
export function h(sel: any, b?: any, c?: any): VNode {
var data: VNodeData = {}, children: any, text: any, i: number;
// 处理参数，实现重载的机制
if (c !== undefined) {
  // 处理三个参数的情况
  // sel、data、children/text
  data = b;
  if (is.array(c)) { children = c; }
  // 如果 c 是字符串或者数字
  else if (is.primitive(c)) { text = c; }
  // 如果 c 是VNode
  else if (c && c.sel) { children = [c]; }
} else if (b !== undefined) {
  // 处理两个参数的情况
  // 如果 b 是数组
  if (is.array(b)) { children = b; }
  // 如果 b 是字符串或者数字
  else if (is.primitive(b)) { text = b; }
  // 如果 b 是VNode
  else if (b && b.sel) { children = [b]; }
  else { data = b; }
}
if (children !== undefined) {
  // 处理 children 中的原始值(string/number)
  for (i = 0; i < children.length; ++i) {
    // 如果 child 是 string/number,创建文本节点
    if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
  }
}
if (
  sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' &&
  (sel.length === 3 || sel[3] === '.' || sel[3] === '#')
) {
  // 如果是 svg , 添加命名空间
  addNS(data, children, sel);
}
// 返回 VNode
return vnode(sel, data, children, text, undefined);
};
// 导出模块
export default h;

VNode

一个VNode就是一个虚拟节点用来描述一个DOM元素，如果这个VNode有children就是 Virtual DOM
源码位置：src/vnode.ts ```javascript export interface VNode { // 选择器 sel: string | undefined; // 节点数据：属性/样式/事件等 data: VNodeData | undefined; // 子节点，和 text 只能互斥 children: Array | undefined; // 记录 vnod 对应的真实 DOM elm: Node | undefined; // 节点中的内容，和 children 只能互斥 text: string | undefined; // 优化用 key: Key | undefined; }

export function vnode(sel: string | undefined, data: any | undefined, children: Array | undefined, text: string | undefined, elm: Element | Text | undefined): VNode { let key = data === undefined ? undefined : data.key; return {sel, data, children, text, elm, key}; }

export default vnode;

<a name="kaCg0"></a>
### snabbdom
---
- patch(oldVnode,newVnode)
- 打补丁，把新节点中变化的内容渲染到真实DOM，最后返回新节点作为下一次处理的旧节点
- 对比新旧VNode是否是相同节点(节点的 key和 sel 相同)
- 如果不是相同节点，删除之前的内容，重新渲染
- 如果是相同节点，在判断新的VNode是否有text，如果有并且和oldVnode的text不同，直接更新文本内容
- 如果新的VNode有children，判断子节点是否有变化，判断子节点的过程就是diff算法
- diff过程只进行同层级比较
<a name="q3HnU"></a>
#### init
- 功能：init(modules,domApi)，返回patch()函数(高阶函数)
- 为什么要使用高阶函数？
   - 因为patch()函数在外部会调用多次，每一调用依赖一些参数，比如：modules/domApi?cbs
   - 通过高阶函数让init()内部形成闭包，返回的patch()可以访问到modules/domApi/cbs。而不需要重新创建
- init()在返回patch()之前，首先手收集了所有模块中的钩子函数存储到cds对象中
- 源码位置：src/snabbdom.ts
```javascript
const hooks: (keyof Module)[] = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
  let i: number, j: number, cbs = ({} as ModuleHooks);
  // 初始化转换虚拟节点的 api
  const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
  // 把传入的所有模块的钩子函数，统一存储到 cbs 对象中
  // 最终构建的 cbs 对象的形式 cbs = { create: [fn1,fn2], update: [], ... }
  for (i = 0; i < hooks.length; ++i) {
    // cbs.create = [], cbs.update = []...
    cbs[hooks[i]] = [];
    for (j = 0; j < modules.length; ++j) {
      // modules 传入的模块数组
      // 获取模块中的 hook 函数
      // hook = modules[0][create]......
      const hook = modules[j][hooks[i]];
      if (hook !== undefined) {
        // 把获取到的hook函数放入到 cbs 对应的钩子函数数组中
        (cbs[hooks[i]] as Array<any>).push(hook);
      }
    }
  }
    ...
    ...
    ...
    return function patch(oldVnode: VNode | Element, vnode: VNode): VNode{}
}

patch

功能：
- 传入新旧Vnode，对比差异，把差异渲染到DOM
- 返回新的VNode，作为下一次patch()的oldVnode
执行过程：
- 首先执行模块中的钩子函数pre
- 如果oldVnode和vnode相同(key和sel相同)
  - 调用patchVnode()，找节点的差异并更新DOM
- 如果oldVnode是DOM元素
  - 把DOM元素转换成oldVnode
  - 调用createElm()把vnode转换成真实DOM，记录到vnode.elm
  - 把刚创建的DOM元素插入到parent中
  - 移除老节点
  - 触发用户设置的create钩子函数
- 源码位置：src/snabbdom.ts ```javascript // init 内部返回 patch 函数，把vnode渲染从真实 dom，并返回vnode return function patch(oldVnode: VNode | Element, vnode: VNode): VNode { let i: number, elm: Node, parent: Node; // 保存新插入节点的队列，为了触发钩子函数 const insertedVnodeQueue: VNodeQueue = []; // 执行模块的 pre 钩子函数 for (i = 0; i < cbs.pre.length; ++i) cbs.prei;
// 如果 oldVnode 不是 VNode，创建 VNode 并设置 elm if (!isVnode(oldVnode)) { // 把 DOM 元素转换成空的 VNode oldVnode = emptyNodeAt(oldVnode); } // 如果新旧节点是相同节点(key 和 sel 相同) if (sameVnode(oldVnode, vnode)) { // 找节点的差异并更新 DOM patchVnode(oldVnode, vnode, insertedVnodeQueue); } else { // 如果新旧节点不同， vnode 创建对应的 DOM // 获取当前的 DOM 元素 elm = oldVnode.elm as Node; parent = api.parentNode(elm); // 创建 vnode 对应的 DOM 元素，并触发 init/create 钩子函数 createElm(vnode, insertedVnodeQueue);

if (parent !== null) {
```
// 如果父节点不为空，把 vnode 对应的 DOM 插入到文档中
api.insertBefore(parent, vnode.elm as Node, api.nextSibling(elm));
// 移除老节点
removeVnodes(parent, [oldVnode], 0, 0);
```
} } // 执行用户设置的 insert 钩子函数 for (i = 0; i < insertedVnodeQueue.length; ++i) { (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(insertedVnodeQueue[i]); } // 执行模块的 post 钩子函数 for (i = 0; i < cbs.post.length; ++i) cbs.posti; // 返回 vnode return vnode; }; ```

createElm
功能：
- createElm(vnode,insertedVnodeQueue)，返回创建的DOM元素
- 创建vnode对应的DOM元素
执行过程：
- 首先触发用户设置的init钩子函数
- 如果选择器是!，创建评论节点
- 如果选择器为空，创建文本节点
- 如果选择器不为空
  - 解析选择器，设置标签的id和class属性
  - 执行模块的create钩子函数
  - 如果vnode有children，创建子vnode对应的DOM，追加DOM树
  - 如果vnode的text值是string/numver，创建文本节点并追击到DOM树
  - 执行用户设置的create钩子函数
  - 如果有用户设置的insert钩子函数，把vnode添加到队列中

源码位置：src/snabbdom.ts

function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
let i: any, data = vnode.data;
if (data !== undefined) {
  // 执行用户设置的 init 钩子函数
  if (isDef(i = data.hook) && isDef(i = i.init)) {
    i(vnode);
    data = vnode.data;
  }
}
// 把 vnode 转换成真实 DOM 对象 （没有渲染到页面）
let children = vnode.children, sel = vnode.sel;
if (sel === '!') {
  // 如果选择器是!,创建注释节点
  if (isUndef(vnode.text)) {
    vnode.text = '';
  }
  vnode.elm = api.createComment(vnode.text as string);
} else if (sel !== undefined) {
  // 如果选择器不为空
  // 解析选择器
  // Parse selector
  const hashIdx = sel.indexOf('#');
  const dotIdx = sel.indexOf('.', hashIdx);
  const hash = hashIdx > 0 ? hashIdx : sel.length;
  const dot = dotIdx > 0 ? dotIdx : sel.length;
  const tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
  const elm = vnode.elm = isDef(data) && isDef(i = (data as VNodeData).ns) ? api.createElementNS(i, tag)
  : api.createElement(tag);
  if (hash < dot) elm.setAttribute('id', sel.slice(hash + 1, dot));
  if (dotIdx > 0) elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' '));
  for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
  if (is.array(children)) {
    for (i = 0; i < children.length; ++i) {
      const ch = children[i];
      if (ch != null) {
        api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));
      }
    }
  } else if (is.primitive(vnode.text)) {
    api.appendChild(elm, api.createTextNode(vnode.text));
  }
  i = (vnode.data as VNodeData).hook; // Reuse variable
  if (isDef(i)) {
    if (i.create) i.create(emptyNode, vnode);
    if (i.insert) insertedVnodeQueue.push(vnode);
  }
} else {
  // 如果选择器为空， 创建文本节点
  vnode.elm = api.createTextNode(vnode.text as string);
}
// 返回新创建的 DOM
return vnode.elm;
}

patchVnode

功能：
- patchVnode(oldVnode,vnode.inserteVnodeQueue)
- 对比oldVnode和vnode的差异，把差异渲染到DOM
执行过程：
- 首先执行用户设置的prepatch钩子函数
- 执行create钩子函数
  - 首先执行模块的create钩子函数
  - 然后执行用户设置的create钩子函数
- 如果vnode.text未定义
  - 如果oldVnode.children和vnode.children都有值
    - 调用updateChildren()
    - 使用diff算法对比子节点，更新字节点
  - 如果vnode.children有值，oldVnode.children无值
    - 清空DOM元素
    - 调用addVnodes()，批量添加子节点
  - 如果oldVnode.children有值，vnode.children无值
    - 调用removeVnodes()，批量移除子节点
  - 如果oldVnode.text有值
    - 清空DOM元素的内容
- 如果设置了vnode.text并且和oldVnode.text不等
  - 如果老节点有子节点，全部移除
  - 设置DOM元素的textContent为vnode.text
- 最后执行用户设置的postpacth钩子函数

源码位置：src/snabbdom.ts

function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
let i: any, hook: any;
// 首先执行用户设置的 prepatch 钩子函数
if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
  i(oldVnode, vnode);
}
const elm = vnode.elm = (oldVnode.elm as Node);
let oldCh = oldVnode.children;
let ch = vnode.children;
// 如果新老 vnode 相同返回
if (oldVnode === vnode) return;
if (vnode.data !== undefined) {
  // 执行模块的 update 钩子函数
  for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
  i = vnode.data.hook;
  // 执行用户设置的 update 钩子函数
  if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
}
// 如果 vnode.text 未定义
if (isUndef(vnode.text)) {
  // 如果新老节点都有 children
  if (isDef(oldCh) && isDef(ch)) {
    // 使用 diff 算法对比子节点，更新子节点
    if (oldCh !== ch) updateChildren(elm, oldCh as Array<VNode>, ch as Array<VNode>, insertedVnodeQueue);
  } else if (isDef(ch)) {
    // 如果新节点有 children,老节点没有 children
    // 如果老节点有text,清空 dom 元素的内容
    if (isDef(oldVnode.text)) api.setTextContent(elm, '');
    // 批量添加子节点
    addVnodes(elm, null, ch as Array<VNode>, 0, (ch as Array<VNode>).length - 1, insertedVnodeQueue);
  } else if (isDef(oldCh)) {
    // 如果老节点有children,新节点没有children
    // 批量移除子节点
    removeVnodes(elm, oldCh as Array<VNode>, 0, (oldCh as Array<VNode>).length - 1);
  } else if (isDef(oldVnode.text)) {
    // 如果老节点有 text ,清空 DOM 元素
    api.setTextContent(elm, '');
  }
} else if (oldVnode.text !== vnode.text) {
  // 如果没有设置 vnode.text
  if (isDef(oldCh)) {
    // 如果老节点有 children,移除
    removeVnodes(elm, oldCh as Array<VNode>, 0, (oldCh as Array<VNode>).length - 1);
  }
  // 设置 DOM 元素的 textContent 为 vnode.text
  api.setTextContent(elm, vnode.text as string);
}
// 最后执行用户设置的 postpatch 钩子函数
if (isDef(hook) && isDef(i = hook.postpatch)) {
  i(oldVnode, vnode);
}
}

updateChildren

功能：
- diff算法的核心，对比新旧节点的children,更新DOM
执行过程：
- 要对比两棵树的差异，我们可以取第一棵树的每一个节点依次和第二棵树的每一个急待你比较，但是这样是事件复杂度为O(n^3)
- 在DOM操作的时候我们很少很少会把一个父节点移动/更新到某个子节点
- 因此只需要找同级别的子节点依次比较，然后再找下一级别的节点比较，这样算法的事件复杂度为O()n
- 在进行同级别节点比较的时候，首先会对新老节点数组的开始和结尾节点设置标记索引，遍历的过程中移动索引
- 在对开始和结束节点比较的时候莫总管有四中情况
  - oldStartVnode/newStartVnode(旧开始节点/新开始节点)
  - oldEndVnode/newEndVnode(旧结束节点?新结束节点)
  - oldStartVnode/oldEndVnode(旧开始节点/新结束节点)
  - oldEndVnode/newStartVnode(旧结束节点/新开始节点)

课程目标

Virtual DOM概念

为什么要使用Virtual DOM

虚拟DOM的作用

Virtual DOM库

案例演示

Snabbdom基本使用

创建项目

导入Snabbdom

代码演示