交互式DOM(Virtual DOM)
基本概念: 两个用以叙述真实世界DOM的JavaScript第一类.
真实世界的DOM
<div> <h1>真实世界DOM</h1></div>交互式DOM
let vnode = h(div,[h(h1,真实世界DOM)])h表达式聚合的交互式DOM那个JavaScript第一类的源代码
export interfaceVNodeData { props?: Props attrs?: Attrsclass?: Classes style?: VNodeStyle dataset?: Dataset on?: On hero?: Hero attachData?: AttachData hook?: Hooks key?: Key ns?:string // for SVGs fn?: () => VNode // for thunks args?: any[] // for thunks [key: string]: any // for any other 3rd party module } export type Key = string | number const interface VNode = { sel: string | undefined, // 示例 data: VNodeData | undefined, // VNodeData上面定义的VNodeData children: Array<VNode | string> | undefined, //子节点,与text互斥 text: string | undefined, // 标签中间的文本内容 elm: Node | undefined, // 转换而成的真实世界DOM key: Key | undefined // 字符串或者数字 }开发中常见的显示场景,render表达式渲染(h表达式的应用)vue项目中入口文件main.js创建Vue实例
new Vue({ router, store, render: h => h(App) }).$mount(“#app”); //案例2 列表中使用render渲染 columns: [ { title: “操作”, key: “action”, width: 150, render: (h, params) => { return h(div, [ h(Button, { props: { size: small }, style: { marginRight: 5px, marginBottom: 5px, }, on: { click: () => { this.toEdit(params.row.uuid); } } },编辑) ]); } } ]使用交互式DOM的优点
MVVM框架解决试图和状态同步问题模板引擎可以简化视图操作交互式DOM跟踪状态变化参考github上Virtual-dom 的动机叙述交互式dom可以维护程序的状态,跟中上一次的状态通过比较前后两次状态差异更新真实世界DOM跨平台使用浏览器平台渲染DOM服务端渲染SSR(vue<->Nuxt.js react<->Next.js)原生应用(Weex 和 React Native)小程序(uni-app)真实世界DOM的属性很多,创建DOM节点开销很大交互式DOM只是JavaScript第一类,叙述属性并不需要很多,创建开销很小复杂视图情况下提升渲染性能（操作dom性能消耗大，减少操作dom的范围可以提升性能）因为交互式DOM+Diff演算法可以精准找到DOM树变更的地方,减少DOM的操作(重排重绘)使用交互式dom不一定比操作真实世界dom快
交互式dom库
SnabbdomVue.js2.x内部使用的交互式DOM就是改造的Snabbdom大约200SLOC(single line of code)通过模块可扩展源代码使用TypeScript开发最快的Virtual DOM之一virtual-domDiff演算法
基本概念： Diff 的第一类是交互式DOM（virtual dom），更新真实世界 DOM 是 Diff 演算法的结果
snabbdom的核心
init()设置模块 创建patch()表达式使用h()表达式创建JavaScript第一类（VNode）叙述真实世界DOMpatch表达式比较新旧两个VNode把变化的内容更新到真实世界DOM树init表达式：设置模块，然后创建patch表达式
import {init} from snabbdom/build/package/init.js import {h} from snabbdom/build/package/h.js // 1.导入模块 import {styleModule} from “snabbdom/build/package/modules/style”; import {eventListenersModule} from “snabbdom/build/package/modules/eventListeners”; // 2.注册模块 const patch = init([ styleModule, eventListenersModule ]) // 3.使用h()表达式的第二个参数传入模块中使用的数据(第一类) let vnode = h(div, [ h(h1, {style: {backgroundColor: red}}, Hello world), h(p, {on: {click: eventHandler}},Hello P) ]) function eventHandler() { alert(疼,别摸我) } const app = document.querySelector(#app) patch(app,vnode)当init使用导入的模块就能在h表达式中用这些模块提供的api去创建 交互式DOM（vnode）第一类；在上述代码中使用了 样式模块 以及 事件模块 让创建的那个交互式dom具备样式属性以及事件属性，最终通过patch表达式对比两个交互式dom，更新视图
h表达式
// h表达式 export function h (sel: string): VNode export function h (sel: string, data: VNodeData | null): VNode export function h (sel: string, children: VNodeChildren): VNode export function h (sel: string, data: VNodeData | null, children: VNodeChildren): VNode export function h (sel: any, b?: any, c?: any): VNode { var data: VNodeData = {} var children: any var text: any var i: number … return vnode(sel, data, children, text, undefined) //最终返回两个vnode表达式 }; // vnode表达式 export function vnode (sel: string | undefined, data: any | undefined, children: Array<VNode | string> | undefined, text: string | undefined, elm: Element | Text | undefined): VNode { const key = data === undefined ? undefined : data.key return { sel, data, children, text, elm, key } //最终生成Vnode第一类 }注：h表达式 先聚合两个vnode表达式，然后vnode表达式在聚合两个vnode第一类，即交互式dom第一类
patch表达式（核心）
patch（oldVNode，newVnode）把新节点中变化的内容渲染到真实世界dom，最后返回新节点作为下一次处理的旧节点对比新旧节点是否有相同节点（节点的key和sel相同）如果不是相同节点，删除之前的内容，重新渲染如果是相同节点，再判断新的vnode是否有text，如果有并且和oldVnode的text不同直接更新文本内容(patchVnode)如果新的Vnode有children，判断节点是否有变化（updateChildren） return function patch(oldVnode: VNode | Element, vnode: VNode): VNode { let i: number, elm: Node, parent: Node const insertedVnodeQueue: VNodeQueue = [] // cbs.pre就是所有模块的pre钩子表达式集合 for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()// isVnode表达式时判断oldVnode是否是两个交互式DOM第一类 if (!isVnode(oldVnode)) { // 若不是即把Element转换成两个交互式DOM第一类oldVnode = emptyNodeAt(oldVnode) }// sameVnode表达式用于判断两个交互式DOM是否是相同的,源代码见补充1; if(sameVnode(oldVnode, vnode)) {// 相同则运行patchVnode对比两个节点,关于patchVnode后面会重点说明(核心)patchVnode(oldVnode, vnode, insertedVnodeQueue) }else { elm = oldVnode.elm! // !是ts的一种写法代码oldVnode.elm肯定有值 parent= api.parentNode(elm)as Node // createElm是用于创建两个dom元素插入到vnode中(新的交互式DOM) createElm(vnode, insertedVnodeQueue) if(parent !== null) { // 把dom元素插入到父元素中,并且把旧的dom删除 api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))// 把新创建的元素放在旧的dom后面 removeVnodes(parent, [oldVnode], 0, 0) } } for (i = 0; i < insertedVnodeQueue.length; ++i) { insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i]) }for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()return vnode }patchVnode
第一阶段出发prepatch表达式以及update表达式（都会触发prepatch表达式，两者不完全相同才会触发update表达式）第二阶段，真正对比新旧节点差异的地方第三阶段，触发postpatch表达式更新节点 function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) { consthook = vnode.data?.hook hook?.prepatch?.(oldVnode, vnode)const elm = vnode.elm = oldVnode.elm! const oldCh = oldVnode.children as VNode[] constch = vnode.childrenas VNode[] if (oldVnode === vnode) return if (vnode.data !== undefined) { for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) vnode.data.hook?.update?.(oldVnode, vnode) }if (isUndef(vnode.text)) { // 新节点的text属性是undefined if (isDef(oldCh) && isDef(ch)) { // 当新旧节点都存在子节点 if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) //并且他们的子节点不相同执行updateChildren表达式,后续会重点说明(核心) } else if (isDef(ch)) { // 只有新节点有子节点 // 当旧节点有text属性就会把赋予给真实世界dom的text属性 if(isDef(oldVnode.text)) api.setTextContent(elm, )// 并且把新节点的所有子节点插入到真实世界dom中 addVnodes(elm, null, ch, 0, ch.length – 1, insertedVnodeQueue) }else if (isDef(oldCh)) { // 清除真实世界dom的所有子节点 removeVnodes(elm, oldCh, 0, oldCh.length – 1) } else if (isDef(oldVnode.text)) { // 把赋予给真实世界dom的text属性 api.setTextContent(elm, ) } } else if(oldVnode.text !== vnode.text) {//若旧节点的text与新节点的text不相同 if (isDef(oldCh)) { // 若旧节点有子节点,就把所有的子节点删除removeVnodes(elm, oldCh,0, oldCh.length – 1) } api.setTextContent(elm, vnode.text!) // 把新节点的text赋予给真实世界dom} hook?.postpatch?.(oldVnode, vnode)// 更新视图 }updateChildren(核中核:判断子节点的差异)
