什么是虚拟DOM
- 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对 象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM
- Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如：指令和组 件机制
为什么使用虚拟DOM
- 可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如何操作 DOM，从而提高开发效率
- 作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。
- 关于性能方面，虚拟DOM不一定可以提高性能
- 首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM，
- 如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法对比新旧两个虚拟 DOM 树的差异，最终把差异更新到真实 DOM
Vue.js中的虚拟DOM
-
render中的h函数
const vm = new Vue({ el: '#app', render (h) { // h(tag, data, children) // return h('h1', this.msg) // return h('h1', { domProps: { innerHTML: this.msg } }) // return h('h1', { attrs: { id: 'title' } }, this.msg) const vnode = h( 'h1', { attrs: { id: 'title' } }, this.msg ) console.log(vnode) return vnode }, data: { msg: 'Hello Vue' } })
image-20210311081829243.png
-
vm.$createElement(tag, data, children, normalizeChildren)
- tag：标签名称或组件对象
- data：描述tag，可以设置DOM的属性或者标签的属性
- children：tag中的文本内容或子节点
- text：文本内容
- elm：记录真实DOM，当VNode转换为真实DOM后，记录到elm中
- key：复用当前元素
虚拟DOM创建整体过程
image-20210311082639333.png
-
首次渲染过程
调用vm._init()初始化Vue中的实例成员，在方法最后调用了vm.
mount()中调用了mountComponent()开始挂载组件，最核心的是创建Watcher对象，Watcher中最终调用updateComponent()，即
vm._update(vm._render(), hydrating)；在vm._render()中调用了自己传入的render函数或者编译生成的render函数，render函数调用的时候通过render.call(vm._renderProxy,vm.$createElement)，通过call改变内部this，第二个参数为h函数（render(h)，h就是vm.$createELement）,最终返回VNode虚拟节点，并传递给vm._update()；vm._udpate中调用__patch__负责将虚拟DOM渲染成真实DOM -
VNode的创建过程
VNode转换为真实DOM需经历VNode的create、diff、patch等
-
Vue虚拟DOM的生成是在src/core/instance/lifecycle.js中，mountComponent定义了updateComponent方法
udpateComponent = () => { // vm._render()生成虚拟DOM // vm._update()虚拟DOM转为真实DOM vm._update(vm._render(), hydrating) } udpateComponent方法是在Watcher内部调用的
src/core/instance/render.js中定义在Vue原型上，vm._render()中首先获取用户传入的render或者模板编译的render，
const { render, _parentVnode } = vm.$options，通过call调用render，并改变内部this-
vm.
createElement，当模板编译生成的render调用_c
<div id="app"> {{message}} </div> // 用render函数 render (createElement) { return createElement('div',{ attrs: { id: 'app' } }, this.message) } // 再看_render函数中的render方法的调用，render函数中的createElement就是vm.$createElement方法 vnode = render.call(vm._renderProxy, vm.$createElement) export function initRender (vm: Component) { vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) } // vm._c是模板编译成的render函数使用，vm.$createElement是用户手写render方法使用 createElement，当手动创建h函数时，既可以传两个参数，也可以传三个参数，如果传入三个参数，data必须是对象的形式，传入两个参数；首先判断data是数组或者原始值，将data的值赋值给children，
createElement时会将normalizationType设置为2
_createElemet内部创建VNode对象，首先判断data不为空并且是响应式数据时，在开发环境会警告，并且返回空的VNode节点；接着判断data存在并且data.is也存在，将data.is记录到tag上，如果tag为false，则返回空的VNode节点；接着判断key如果不是原始值则警告；当用户传入render函数时，通过normalizeChildren将多维数组转换为一维数组，如果是编译生册灰姑娘的render，通过simpleNormalizeChildren将二维数组转换为一维数组，理论上编译生成的children都是VNode类型，但是functional component函数式组件返回的是数组而不是一个根节点，所以需要调用concat方法
最后判断tag类型，如果是string类型，如果是html的保留标签，则会发出警告，并创建一个普通VNode节点，如果是已注册的组件名，则通过createComponent创建一个组件类型的VNnode，否则创建一个未知标签的VNode；如果不是字符串，则是组件类型，直接调用createComponent创建一个i而组建类型的VNode节点
_createElemet创建VNode完成，并返回给render函数
vm._update将VNode渲染为真实DOM，_update中会调用
__patch__方法
-
VNode的处理过程update
_udpate调用时机有两个，一个是首次渲染，一个是数据更新；
_update作用是VNode渲染成真实DOM，定义在src/core/instance/lifecycle.js中_udpate方法调用
__patch__方法创建真实DOM// prevVnode之前处理过得VNode 如果没有是首次渲染 if (!prevVnode) { // initial render vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) } else { // updates 数据更新传入两个vnode vm.$el = vm.__patch__(prevVnode, vnode) } -
patch函数的初始化
-
定义在src/platforms/web/runtime/index.js中初始化，直接挂载在vue原型
import { patch } from './patch' Vue.prototype.__patch__ = inBrowser ? patch : noop -
在patch.js中通过createPatchFunction生成
import * as nodeOps from 'web/runtime/node-ops' import { createPatchFunction } from 'core/vdom/patch' import baseModules from 'core/vdom/modules/index' import platformModules from 'web/runtime/modules/index' // the directive module should be applied last, after all // built-in modules have been applied. // platformModules模块钩子函数 操作属性、样式、事件等 模块导出的都是生命周期函数 // baseModules与平台无关 处理指令和ref const modules = platformModules.concat(baseModules) // nodeOps操作DOMAPI export const patch: Function = createPatchFunction({ nodeOps, modules }) -
src/core/vdom/patch，createPatchFunction类似于Snabbdom的init，最后返回patch函数
export function createPatchFunction (backend) { let i, j const cbs = {} const { modules, nodeOps } = backend // 把模块中的钩子函数全部设置到 cbs 中，将来统一触发 // cbs --> { 'create': [fn1, fn2], ... } for (i = 0; i < hooks.length; ++i) { cbs[hooks[i]] = [] for (j = 0; j < modules.length; ++j) { if (isDef(modules[j][hooks[i]])) { cbs[hooks[i]].push(modules[j][hooks[i]]) } } } …… // 函数柯里化，让一个函数返回一个函数 // createPatchFunction({ nodeOps, modules }) 传入平台相关的两个参数 // core中的createPatchFunction (backend), const { modules, nodeOps } = backend // core中方法和平台无关，传入两个参数后，可以在上面的函数中使用这两个参数 return function patch (oldVnode, vnode, hydrating, removeOnly) { } } -
patch函数执行过程
首次渲染时，传入的
el的赋值在mountComponent函数中，vnode对应的调用render函数的返回值，hydrating和removeOnly都为false；传入的oldValue为DOM container，所以isRealElement为true，调用emptyNodeAt方法转换为VNode对象，再调用createElm方法，作用是通过虚拟节点创建真实的DOM并插入它的父节点中，createComponent方法创建子组件，接下来判断vnode是否包含tag，如果包含，会简单的对tag的合法性在非生产环境下做校验，看是否是一个合法标签；然后调用平台DOM的操作创建一个占位符元素；接着调用createChildren方法创建子元素，调用invokeCreateHooks方法执行所有的create的钩子并把vnode push到insertedVnodeQueue中，最后insert方法把DOM插入到父节点，整个vnode树节点的插入是先子后父，insert方法调用一些nodeOps把子节点插入到父结点中，其实就是调用原生DOM的API进行DOM操作
function patch (oldVnode, vnode, hydrating, removeOnly) { // 如果没有 vnode 但是有 oldVnode，执行销毁的钩子函数 if (isUndef(vnode)) { if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return } let isInitialPatch = false const insertedVnodeQueue = [] if (isUndef(oldVnode)) { // 如果没有 oldVnode，创建 vnode 对应的真实 DOM // empty mount (likely as component), create new root element isInitialPatch = true createElm(vnode, insertedVnodeQueue) } else { // 判断当前 oldVnode 是否是 DOM 元素（首次渲染） const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // 如果不是真实 DOM，并且两个 VNode 是 sameVnode，这个时候开始执行 Diff // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly) } else { if (isRealElement) { // mounting to a real element // check if this is server-rendered content and if we can perform // a successful hydration. if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) { oldVnode.removeAttribute(SSR_ATTR) hydrating = true } …… // either not server-rendered, or hydration failed. // create an empty node and replace it oldVnode = emptyNodeAt(oldVnode) } // replacing existing element const oldElm = oldVnode.elm const parentElm = nodeOps.parentNode(oldElm) // create new node createElm( vnode, insertedVnodeQueue, // extremely rare edge case: do not insert if old element is in a // leaving transition. Only happens when combining transition + // keep-alive + HOCs. (#4590) oldElm._leaveCb ? null : parentElm, nodeOps.nextSibling(oldElm) ) // update parent placeholder node element, recursively if (isDef(vnode.parent)) { let ancestor = vnode.parent const patchable = isPatchable(vnode) while (ancestor) { for (let i = 0; i < cbs.destroy.length; ++i) { cbs.destroy[i](ancestor) } ancestor.elm = vnode.elm if (patchable) { for (let i = 0; i < cbs.create.length; ++i) { cbs.create[i](emptyNode, ancestor) } // #6513 // invoke insert hooks that may have been merged by create hooks. // e.g. for directives that uses the "inserted" hook. const insert = ancestor.data.hook.insert if (insert.merged) { // start at index 1 to avoid re-invoking component mounted hook for (let i = 1; i < insert.fns.length; i++) { insert.fns[i]() } createElm 把 VNode 转换成真实 DOM，插入到 DOM 树上 } } else { registerRef(ancestor) } ancestor = ancestor.parent } } // destroy old node if (isDef(parentElm)) { removeVnodes(parentElm, [oldVnode], 0, 0) } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) } } } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm } -
createElm把 VNode 及VNode的子节点转换成真实 DOM，插入到 DOM 树上
根据tag不同来创建不同的DOM节点，并插入
function createElm ( vnode, insertedVnodeQueue, // VNode转换成的真实DOM挂载的父节点的位置 parentElm, refElm, nested, ownerArray, index ) { // ownerArray是否有子节点 if (isDef(vnode.elm) && isDef(ownerArray)) { vnode = ownerArray[index] = cloneVNode(vnode) } vnode.isRootInsert = !nested // for transition enter check if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { return } const data = vnode.data const children = vnode.children const tag = vnode.tag // 1.vnode是标签的情况 if (isDef(tag)) { if (process.env.NODE_ENV !== 'production') { if (data && data.pre) { creatingElmInVPre++ } if (isUnknownElement(vnode, creatingElmInVPre)) { warn( 'Unknown custom element: <' + tag + '> - did you ' + 'register the component correctly? For recursive components, ' + 'make sure to provide the "name" option.', vnode.context ) } } // ns是否有命名空间 vnode.elm = vnode.ns ? nodeOps.createElementNS(vnode.ns, tag) : nodeOps.createElement(tag, vnode) // 设置样式作用域 setScope(vnode) /* istanbul ignore if */ if (__WEEX__) { const appendAsTree = isDef(data) && isTrue(data.appendAsTree) if (!appendAsTree) { if (isDef(data)) { invokeCreateHooks(vnode, insertedVnodeQueue) } insert(parentElm, vnode.elm, refElm) } createChildren(vnode, children, insertedVnodeQueue) if (appendAsTree) { if (isDef(data)) { invokeCreateHooks(vnode, insertedVnodeQueue) } insert(parentElm, vnode.elm, refElm) } } else { // vnode中所有的子元素转换成DOM对象 createChildren(vnode, children, insertedVnodeQueue) if (isDef(data)) { invokeCreateHooks(vnode, insertedVnodeQueue) } // 此时vnode对应的DOM对象创建完毕 执行insert 将vnode对应的DOM对象插入到parentElm上 insert(parentElm, vnode.elm, refElm) } if (process.env.NODE_ENV !== 'production' && data && data.pre) { creatingElmInVPre-- } // 2.vnode是注释节点 } else if (isTrue(vnode.isComment)) { // createComment创建注释节点 存储到vm.elm上 插入到DOM树上 vnode.elm = nodeOps.createComment(vnode.text) insert(parentElm, vnode.elm, refElm) // 3.vnode是文本节点 } else { vnode.elm = nodeOps.createTextNode(vnode.text) insert(parentElm, vnode.elm, refElm) } } -
patchVnode对比新旧VNode的差异，并更新到页面
function patchVnode ( oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly ) { if (oldVnode === vnode) { return } if (isDef(vnode.elm) && isDef(ownerArray)) { // clone reused vnode vnode = ownerArray[index] = cloneVNode(vnode) } const elm = vnode.elm = oldVnode.elm if (isTrue(oldVnode.isAsyncPlaceholder)) { if (isDef(vnode.asyncFactory.resolved)) { hydrate(oldVnode.elm, vnode, insertedVnodeQueue) } else { vnode.isAsyncPlaceholder = true } return } // 如果新旧 VNode 都是静态的，那么只需要替换componentInstance if (isTrue(vnode.isStatic) && isTrue(oldVnode.isStatic) && vnode.key === oldVnode.key && (isTrue(vnode.isCloned) || isTrue(vnode.isOnce)) ) { vnode.componentInstance = oldVnode.componentInstance return } // 触发prepatch钩子函数 let i const data = vnode.data if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) { i(oldVnode, vnode) } // 获取新旧节点的子节点 const oldCh = oldVnode.children const ch = vnode.children if (isDef(data) && isPatchable(vnode)) { // 调用 cbs 中的udpate钩子函数，更新节点的属性/样式/事件.... for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) // 用户的自定义update钩子函数 if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode) } // patchVnode核心功能 对比新旧vnode // 新节点没有文本属性 if (isUndef(vnode.text)) { // 老节点和老节点都有有子节点 if (isDef(oldCh) && isDef(ch)) { // 对子节点进行 diff 操作，调用 updateChildren if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { // 新的有子节点，老的没有子节点 if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(ch) } // 先清空老节点 DOM 的文本内容，然后为当前 DOM 节点加入子节点 if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') // 把新节点下的子节点添加到DOM元素 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { // 老节点有子节点，新的没有子节点 // 删除老节点中的子节点 removeVnodes(oldCh, 0, oldCh.length - 1) } else if (isDef(oldVnode.text)) { // 老节点有文本，新节点没有文本 // 清空老节点的文本内容 nodeOps.setTextContent(elm, '') } // 新老节点都有文本节点 并且不相等 } else if (oldVnode.text !== vnode.text) { // 重新设置DOM对象内容修改文本 nodeOps.setTextContent(elm, vnode.text) } // 执行postpatch钩子函数 if (isDef(data)) { if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode) } } -
updateChildren处理新旧子节点， 和 Snabbdom中的 updateChildren 整体算法（diff算法）一致
// 更新新旧节点的子节点 // oldCh, newCh都是数组，对比两个数组中的所有vnode，并且找到他们的差异去更新；对比的过程会根据DOM的特点进行优化 // 先对比两个数组的开始和结束的四个节点 function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { // 定于新老节点开始索引和结束索引 以及新老节点开始和结束节点本身 let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0] let oldEndVnode = oldCh[oldEndIdx] let newEndIdx = newCh.length - 1 let newStartVnode = newCh[0] let newEndVnode = newCh[newEndIdx] let oldKeyToIdx, idxInOld, vnodeToMove, refElm // removeOnly is a special flag used only by <transition-group> // to ensure removed elements stay in correct relative positions // during leaving transitions const canMove = !removeOnly // 检查新节点中是否有重复key if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(newCh) } // diff 算法 // 当新节点和旧节点数组都没有遍历完成 老的结束节点索引小于新的结束节点索引并且新的开始节点索引小于新的结束节点索引 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 判断老的开始节点是否有值 如果没有获取下个节点作为开始节点 if (isUndef(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left // 判断老的结束节点是否有值 如果没有获取上个节点作为开始节点 } else if (isUndef(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx] // 接着对比数组中的四个顶点 总共有四种情况 // 1.老的开始节点和新的开始节点 // 2.老的结束节点和新的结束节点 } else if (sameVnode(oldStartVnode, newStartVnode)) { // oldStartVnode 和 newStartVnode 相同(sameVnode) // 直接将该 VNode 节点进行 patchVnode patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) // 获取下一组开始节点 oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] } else if (sameVnode(oldEndVnode, newEndVnode)) { // 直接将该 VNode 节点进行 patchVnode patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) // 获取下一组结束节点 oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] // 3.老的开始节点和新的结束节点 } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right // oldStartVnode 和 newEndVnode 相同(sameVnode) // 进行 patchVnode，把 oldStartVnode 移动到最后 patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)) // 移动游标，获取下一组节点 oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] // 4.老的结束节点和新的开始节点 } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left // oldEndVnode 和 newStartVnode 相同(sameVnode) // 进行 patchVnode，把 oldEndVnode 移动到最前面 patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] } else { // 以上四种情况都不满足 // newStartNode 依次和旧的节点比较 // 从新的节点开头获取一个，去老节点中查找相同节点 // 先找新开始节点的key和老节点相同的索引，如果没找到再通过sameVnode找 // 优化 先将老节点的key和对应的索引存储到oldKeyToIdx 并且保证此变量在没有赋值的时候才去调用 if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) // 如果没有找到老节点对应的索引 if (isUndef(idxInOld)) { // New element // 创建节点并插入到最前面 createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } else { // 获取要移动的老节点 vnodeToMove = oldCh[idxInOld] // 如果使用 newStartNode 找到相同的老节点 if (sameVnode(vnodeToMove, newStartVnode)) { // 执行 patchVnode，并且将找到的旧节点移动到最前面 patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldCh[idxInOld] = undefined canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm) } else { // 如果key相同，tag不相同，但是是不同的元素，创建新元素 // same key but different element. treat as new element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } } // 将下一个节点作为新的开始节点 依次去处理 newStartVnode = newCh[++newStartIdx] } } // 当结束时 oldStartIdx > oldEndIdx，说明老节点遍历完，但是新节点还没有 有剩余新节点 if (oldStartIdx > oldEndIdx) { // 说明新节点比老节点多，把剩下的新节点插入到老的节点后面 refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue) } else if (newStartIdx > newEndIdx) { // 当结束时 newStartIdx > newEndIdx，新节点遍历完，但是旧节点还没有 直接删除 removeVnodes(oldCh, oldStartIdx, oldEndIdx) } } -
未设置key的情况
<div id="app"> <button @click="handler">按钮</button> <ul> <li v-for="value in arr">{{value}}</li> </ul> </div> <script src="../../dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { arr: ['a', 'b', 'c', 'd'] }, methods: { handler () { this.arr = ['a', 'x', 'b', 'c', 'd'] } } }) </script>在 updateChildren 中比较子节点的时候，会更新三次DOM，插入一次DOM
-
设置key的情况
<li v-for="value in arr" :key="value">{{value}}</li>在 updateChildren 中比较子节点的时候，因为 oldVnode 的子节点的 b,c,d 和 newVnode 的 x,b,c 的 key 相同，所以只做比较，没有更新 DOM 的操作，当遍历完毕后，会再把 x 插入到 DOM 上DOM 操 作只有一次插入操作。DOM操作次数少，设置key会优化DOM操作
-
