【Vue.js源码解析 二】-- 虚拟 DOM

前言

笔记来源：拉勾教育 大前端高薪训练营
阅读建议：建议通过左侧导航栏进行阅读

虚拟 DOM

基本介绍

什么是虚拟 DOM

• 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。

• Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，

  例如：指令和组件机制。

• Vue 1.x 中细粒度监测数据的变化，每一个属性对应一个 watcher，开销太大Vue 2.x 中每个组件对应一个 watcher，状态变化通知到组件，再引入虚拟 DOM 进行比对和渲染

为什么要使用虚拟 DOM

• 使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如何操作 DOM，从而提高开发效率
• 作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。
• 关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM，如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM之前会通过 Diffff 算法对比新旧两个虚拟 DOM 树的差异，最终把差异更新到真实 DOM

Vue.js 中的虚拟 DOM

---

• 演示 render 中的 h 函数
  • h 函数就是 createElement()

    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 null
        },
        data: {
        	msg: 'Hello Vue'
        }
    })
  

h 函数

• vm.$createElement(tag, data, children, normalizeChildren)
  • tag：标签名称或者组件对象
  • data：描述 tag，可以设置 DOM 的属性或者标签的属性
  • children：tag 中的文本内容或者子节点

VNode

• VNode 的核心属性
  • tag：标签名称或者组件对象
  • data：描述 tag，可以设置 DOM 的属性或者标签的属性
  • children：tag 中的文本内容或者子节点
  • text：当前节点的文本，一般文本节点或注释节点会有该属性
  • elm：记录真实 DOM
  • key：用来复用当前的元素

构建过程

虚拟 DOM 创建过程

---

createElement

---

功能

• createElement() 函数，用来创建虚拟节点 (VNode)，我们的 render 函数中的参数 h，就是createElement()

    render(h) { 
        // 此处的 h 就是 vm.$createElement 
        return h('h1', this.msg) 
    }
  

定义

• src/core/instance/render.js
  • 在 vm._render() 中调用了，用户传递的或者编译生成的 render 函数，这个时候传递了 createElement

    // 将 template 编译成 render 函数，对编译生成的 render 进行渲染的方法
    vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
    // normalization is always applied for the public version, used in
    // user-written render functions.
    // 对手写 render 函数进行渲染的方法
    vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  

• src/core/vdom/create-element.js
  • vm._c 和 vm.$createElement 内部都调用了 createElement，不同的是最后一个参数。vm._c 在编译生成的 render 函数内部会调用，vm.$createElement 在用户传入的 render 函数内部调用。当用户传入render 函数的时候，要对用户传入的参数做处理。

    // wrapper function for providing a more flexible interface
    // without getting yelled at by flow
    // 处理用户传入的参数
    export function createElement (
    	context: Component,
    	tag: any,
    	data: any,  // data 可以省略，引入模块，设置样式/属性/事件
    	children: any,
    	normalizationType: any,
    	alwaysNormalize: boolean
    ): VNode | Array<VNode> {
        // 此时 data ，没有传入，即 data --> children
        if (Array.isArray(data) || isPrimitive(data)) {
            normalizationType = children
            children = data
            data = undefined
        }
        // 用户传入的 render 函数
        if (isTrue(alwaysNormalize)) {
            // normalizationType 用来处理参数 children 
            normalizationType = ALWAYS_NORMALIZE
        }
    	return _createElement(context, tag, data, children, normalizationType)
    }
  

  • 执行完 createElement 之后创建好了 VNode，把创建好的 VNode 传递给 vm._update() 继续处理

    // 创建 VNode
    export function _createElement (
        context: Component,
         tag?: string | Class<Component> | Function | Object,
         data?: VNodeData,
         children?: any,
         normalizationType?: number
    ): VNode | Array<VNode> {
        if (isDef(data) && isDef((data: any).__ob__)) {
        	......
    		return createEmptyVNode()
        }
        // <component v-bind:is="currentTabComponent"></component>
        // object syntax in v-bind
        if (isDef(data) && isDef(data.is)) {
        	tag = data.is
        }
        if (!tag) {
            // in case of component :is set to falsy value
            return createEmptyVNode()
        }
        ......
        // 处理作用域插槽
        // support single function children as default scoped slot
        if (Array.isArray(children) && 
            typeof children[0] === 'function'
        ) {
            data = data || {}
            data.scopedSlots = { default: children[0] }
            children.length = 0
        }
        // 用户传过来的 render 函数
        if (normalizationType === ALWAYS_NORMALIZE) {
            // 返回一维数组，处理用户手写的 render
            // 当手写 render 函数的时候调用 
            // 判断 children 的类型，如果是原始值的话转换成 VNode 的数组 
            // 如果是数组的话，继续处理数组中的元素 
            // 如果数组中的子元素又是数组(slot template)，递归处理 
            // 如果连续两个节点都是字符串会合并文本节点
            children = normalizeChildren(children)
        } else if (normalizationType === SIMPLE_NORMALIZE) {
            // 把二维数组，转换成一维数组
            // 如果 children 中有函数组件的话，函数组件会返回数组形式 
            // 这时候 children 就是一个二维数组，只需要把二维数组转换为一维数组
            children = simpleNormalizeChildren(children)
        }
        let vnode, ns
        // 判断 tag 是字符串还是组件
        if (typeof tag === 'string') {
            let Ctor
            ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
            // 如果是浏览器的保留标签，创建对应的 VNode
        	if (config.isReservedTag(tag)) {
                // platform built-in elements
                if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
                    warn(
                    `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
                    context
                    )
        		}
                vnode = new VNode(
                    config.parsePlatformTagName(tag), data, children,
                    undefined, undefined, context
                )
            // 判断是否是 自定义组件
            } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
                // 查找自定义组件构造函数的声明
                // 根据 Ctor 创建组件的 VNode
                // component
                vnode = createComponent(Ctor, data, context, children, tag)
        	} else {
                // unknown or unlisted namespaced elements
                // check at runtime because it may get assigned a namespace when its
                // parent normalizes children
                vnode = new VNode(
                    tag, data, children,
                    undefined, undefined, context
                )
            }
        } else {
            // direct component options / constructor
            vnode = createComponent(tag, data, context, children)
        }
        if (Array.isArray(vnode)) {
        	return vnode
        } else if (isDef(vnode)) {
        	if (isDef(ns)) applyNS(vnode, ns)
            if (isDef(data)) registerDeepBindings(data)
            return vnode
        } else {
        	return createEmptyVNode()
        }
    }
  

update

---

功能

• 内部调用 vm.patch() 把虚拟 DOM 转换成真实 DOM

定义

• src/core/instance/lifecycle.js

    // _update 方法的作用是把 VNode 渲染成真实的 DOM
    Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
        const vm: Component = this
        const prevEl = vm.$el
        // 之前所处理过的 vnode 对象
        const prevVnode = vm._vnode
        const restoreActiveInstance = setActiveInstance(vm)
        vm._vnode = vnode
        // Vue.prototype.__patch__ is injected in entry points
        // based on the rendering backend used.
        // 判断是否是首次渲染
        if (!prevVnode) {
            // initial render
            // __patch__ 将原来的真实 DOM 转换为 虚拟 DOM，然后与创建的 vnode 进行比较
            // 最后 将虚拟DOM 转换为 真实DOM
            vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
        } else {
            // updates
            vm.$el = vm.__patch__(prevVnode, vnode)
        }
        restoreActiveInstance()
        // update __vue__ reference
        if (prevEl) {
            prevEl.__vue__ = null
        }
        if (vm.$el) {
            vm.$el.__vue__ = vm
        }
        // if parent is an HOC, update its $el as well
        if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
            vm.$parent.$el = vm.$el
        }
        // updated hook is called by the scheduler to ensure that children are
        // updated in a parent's updated hook.
    }
  

patch

---

patch 函数初始化

功能

• 对比两个 VNode 的差异，把差异更新到真实 DOM。如果是首次渲染的话，会把真实 DOM 先转换成 VNode

Snabbdom 中 patch 函数的初始化

• src/snabbdom.ts

    export function init (modules: Array<Partial<Module>>, domApi?: DOMAPI) { 
        return function patch (oldVnode: VNode | Element, vnode: VNode): 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 } 
    }
  

Vue.js 中 patch 函数的初始化

• src/platforms/web/runtime/index.js

    import { patch } from './patch'
    
    // install platform patch function
    // __patch__ 将 vnode 转换成 真实 DOM
    // noop 是一个空函数
    Vue.prototype.__patch__ = inBrowser ? patch : noop
  

• src/platforms/web/runtime/patch.js

    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.
    const modules = platformModules.concat(baseModules)
    
    export const patch: Function = createPatchFunction({ nodeOps, modules })
  

• src/core/vdom/patch.js

    // 函数柯里化，让一个函数返回一个函数
    // createPatchFunction({ nodeOps, modules }) 传入平台相关的两个参数
    
    // core 中的createPatchFunction (backend), const { modules, nodeOps } = backend
    // core 中方法和平台无关，传入两个参数后，可以在上面的函数中使用这两个参数
    export function createPatchFunction (backend) {
        let i, j
        const cbs = {}
    
        // modules 节点的属性/事件/样式的操作
        // nodeOps 节点操作
        const { modules, nodeOps } = backend
    
        // hooks 定义了 生命钩子函数
        for (i = 0; i < hooks.length; ++i) {
            // cbs['update'] = []
            cbs[hooks[i]] = []
            for (j = 0; j < modules.length; ++j) {
                if (isDef(modules[j][hooks[i]])) {
                    // cbs['update'] = [updateAttrs, updateClass, update...]
                    cbs[hooks[i]].push(modules[j][hooks[i]])
                }
            }
        }
    	......
    	......
    	......
    	return function patch (oldVnode, vnode, hydrating, removeOnly) {
        	......
    	}
    }
  

patch 函数执行过程

• patch 函数，具体实现过程如下：

    function patch (oldVnode, vnode, hydrating, removeOnly) {
        // 新的 VNode 不存在
        if (isUndef(vnode)) {
            // 老的 VNode 存在，执行 Destroy 钩子函数
            if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
            return
        }
    
        let isInitialPatch = false
        // 存储新插入的 VNode 节点
        const insertedVnodeQueue = []
    
        // 老的 VNode 不存在
        if (isUndef(oldVnode)) {
            // empty mount (likely as component), create new root element
            isInitialPatch = true
            // 创建新的 VNode，没有挂载到 DOM 树中
            createElm(vnode, insertedVnodeQueue)
        } else {
            // 新的和老的 VNode 都存在，更新
            const isRealElement = isDef(oldVnode.nodeType)
            // 判断参数1是否是真实 DOM，不是真实 DOM
            if (!isRealElement && sameVnode(oldVnode, vnode)) {
                // 更新操作，Diff 算法
                // patch existing root node
                patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
            } else {
                // 第一个参数是真实 DOM，创建 VNode
                // 初始化
                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
                    }
                    if (isTrue(hydrating)) {
                        if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
                            invokeInsertHook(vnode, insertedVnodeQueue, true)
                            return oldVnode
                        } else if (process.env.NODE_ENV !== 'production') {
                            warn(
                                'The client-side rendered virtual DOM tree is not matching ' +
                                'server-rendered content. This is likely caused by incorrect ' +
                                'HTML markup, for example nesting block-level elements inside ' +
                                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                                'full client-side render.'
                            )
                        }
                    }
                    // 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
                // 创建 DOM 节点
                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]()
                                }
                            }
                        } else {
                            registerRef(ancestor)
                        }
                        ancestor = ancestor.parent
                    }
                }
    
                // destroy old node
                if (isDef(parentElm)) {
                    removeVnodes([oldVnode], 0, 0)
                } else if (isDef(oldVnode.tag)) {
                    invokeDestroyHook(oldVnode)
                }
            }
        }
    
        // 触发 insertedVnodeQueue 数组中存放的钩子函数
        invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
        return vnode.elm
    }
  

createElm

---

• 把 VNode 转换成真实 DOM，插入到 DOM 树上

    // 把虚拟 DOM 转换成 真实 DOM，并挂载到真实 DOM 树上
    function createElm (
    vnode,
     insertedVnodeQueue,
     parentElm,
     refElm,
     nested,
     ownerArray, // vnode 中的子节点
     index
    ) {
        if (isDef(vnode.elm) && isDef(ownerArray)) {
            // This vnode was used in a previous render!
            // now it's used as a new node, overwriting its elm would cause
            // potential patch errors down the road when it's used as an insertion
            // reference node. Instead, we clone the node on-demand before creating
            // associated DOM element for it.
            // 克隆 vnode 本身 和 其子节点
            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
        // tag 标签名称，判断 vnode 是标签的情况
        if (isDef(tag)) {
            if (process.env.NODE_ENV !== 'production') {
                if (data && data.pre) {
                    creatingElmInVPre++
                }
                // 判断是否是 HTML 中未存在的标签，即自定义标签
                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
                    )
                }
            }
    
            // 判断 vnode 的 ns 属性，即判断是否有命名空间
            vnode.elm = vnode.ns
            // 处理 svg 的情况
                ? nodeOps.createElementNS(vnode.ns, tag)
            // 处理 标签，即创建 DOM 元素
            : nodeOps.createElement(tag, vnode)
            // 为 vnode 所对应的 DOM 元素，设置对应的样式作用域
            setScope(vnode)
    
            /* istanbul ignore if */
            if (__WEEX__) {
                // in Weex, the default insertion order is parent-first.
                // List items can be optimized to use children-first insertion
                // with append="tree".
                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)) {
                    // 触发 create 钩子函数
                    invokeCreateHooks(vnode, insertedVnodeQueue)
                }
                // 将创建好的 DOM 对象，插入到 parentElm 内
                insert(parentElm, vnode.elm, refElm)
            }
    
            if (process.env.NODE_ENV !== 'production' && data && data.pre) {
                creatingElmInVPre--
            }
        } else if (isTrue(vnode.isComment)) {
            // 判断 vnode 是否是注释节点
            vnode.elm = nodeOps.createComment(vnode.text)
            insert(parentElm, vnode.elm, refElm)
        } else {
            // 判断 vnode 是文本节点
            vnode.elm = nodeOps.createTextNode(vnode.text)
            insert(parentElm, vnode.elm, refElm)
        }
    }
  

patchVnode

---

• 执行 Diff 算法，进行新旧 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
    
        ......
    
        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 中的钩子函数，操作节点的属性/样式/事件...
            for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
            // 用户的自定义钩子
            if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
        }
    
        // 新节点没有文本
        if (isUndef(vnode.text)) {
            // 新节点和老节点都有子节点
            // 对子节点进行 diff 操作，调用 updateChildren
            if (isDef(oldCh) && isDef(ch)) {
                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, '')
                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) {
            // 新老节点都有文本节点
            // 修改文本
            nodeOps.setTextContent(elm, vnode.text)
        }
        if (isDef(data)) {
            if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
        }
    }
  

updateChildren

---

• updateChildren 和 Snabbdom 中的 updateChildren 整体算法一致，这里就不再展开了。我们再来看下它处理过程中 key 的作用，再 patch 函数中，调用 patchVnode 之前，会首先调用 sameVnode()判断当前的新老 VNode 是否是相同节点，sameVnode() 中会首先判断 key 是否相同。

  • 通过下面代码来体会 key 的作用

    <div id="app">
        <button @click="handler">按钮</button>
        <ul>
            <li v-for="value in arr" :key="value">{{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>
  

  • 当没有设置 key 的时候

    在 updateChildren 中比较子节点的时候，会做三次更新 DOM 操作和一次插入 DOM 的操作

  • 当设置 key 的时候

    在 updateChildren 中比较子节点的时候，因为 oldVnode 的子节点的 b,c,d 和 newVnode 的 x,b,c 的 key 相同，所以只做比较，没有更新 DOM 的操作，当遍历完毕后，会再把 x 插入到 DOM 上DOM 操作只有一次插入操作。

总结

---