Vue源码笔记 — 数据驱动--update

Vue版本:2.5.17-beta.0

在《Vue源码笔记 — 数据驱动--Vue实例挂载》中最后提到过,Vue实例挂载最终是通过 vm._update(vm._render(), hydrating)挂载到最终dom上,而在《Vue源码笔记 — 数据驱动--render》中记录 vm._render()方法主要是调用 vm.$createElement返回 vnode数据,接下来记录普通节点调用 vm._update过程。

以下示例,传入普通节点进行渲染挂载到dom上:

new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hello Vue!'
    }
  },
  render (h) {
    return h('div', {
      attrs: { id: 'app' }
    }, this.message)
  }
})

vm._update原型方法是在 src/core/instance/lifecycle.js文件中,源码如下:

export let activeInstance: any = null

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    // 记录当前 vm 实例
    activeInstance = vm
    vm._vnode = vnode // 渲染vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      // 首次渲染传入真实 dom
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // 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.
}

上述源码可看出,先定义了三个变量 prevElprevVnodeprevActiveInstance,而在首次渲染时 prevVnodeprevActiveInstance都为空,prevEl = vm.$el为真实的dom节点(在 mountComponent方法中定的 vm.$el),接着定义 activeInstance为当前实例,vm._vnodevm._render()方法返回的 vnode 对象。 至此可看出在首次渲染时,会走 if (!prevVnode) { ... }中的逻辑调用 vm.__patch__,传入第一个参数为真实的dom节点,第二个参数为生成的vnode对象,而 vm.__patch__方法其实是在 src/platforms/web/runtime/index.js文件中定义的原型方法:

Vue.prototype.__patch__ = inBrowser ? patch : noop

上述引入的 patch是在 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 })

上述源码可看出最终定义的 path方法其实是调用 createPatchFunction生成,而传入的 nodeOps选项是一个集合,对真实dom操作的api集合,modules选项是在 patch时对dom属性的一些操作,如 classstyle等,所以 vm.__patch__其实是调用了 createPatchFunction方法。 而 createPatchFunction方法定义在 src/core/vdom/patch.js文件中(因为源码太长就不全部显示了),最终返回了一个 patch方法,源码如下:

return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // 删除逻辑 子组件销毁
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = [] // 调用insert钩子使用

    // 子组件渲染时会走逻辑
    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      // 判断是否为真实dom
      const isRealElement = isDef(oldVnode.nodeType) 
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
      } else {
        // 首次渲染为真实dom
        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) // 将真实dom 转化成vnode对象
        }

        // replacing existing element
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        // create new node
        // 把vnode挂载到真实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(parentElm, [oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }

    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }

之前说过 vm._update中的首次渲染调用的是 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)其实就是调用上述源码的 path方法,传入的第一个参数有值且为真实dom,所以不走 if (isUndef(oldVnode))逻辑,走 else逻辑,其中定义的 isRealElement为true,所以不走 if (!isRealElement && sameVnode(oldVnode, vnode))逻辑,走 else逻辑,接着会走 if (isRealElement)逻辑(服务端渲染相关相关逻辑省略)调用 emptyNodeAt方法将真实dom转化成vnode对象,之后获取 oldElmparentElmdom节点,调用 createElm方法,此方法就是把vnode挂载到真实dom中,源码如下:

function createElm (
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    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 = 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
    // 插入顺序: 先子后父  最后父在挂载到文档dom上
    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
          )
        }
      }

      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)
      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 {
        // 判断子节点递归调用createElm 插入父dom中
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        // 父挂载节点  当前vnode节点  参考节点
        // 组件时 parentElm为undefined 不做插入操作
        insert(parentElm, vnode.elm, refElm)
      }

      if (process.env.NODE_ENV !== 'production' && data && data.pre) {
        creatingElmInVPre--
      }
    } else if (isTrue(vnode.isComment)) { // 注释节点
      vnode.elm = nodeOps.createComment(vnode.text)
      insert(parentElm, vnode.elm, refElm)
    } else { // 文本节点
      vnode.elm = nodeOps.createTextNode(vnode.text)
      insert(parentElm, vnode.elm, refElm)
    }
}

上述源码的主要逻辑是,首先调用 createComponent方法尝试创建组件节点,我们这里是普通节点所以返回为 undefined,接着从传入的vnode对象中获取 datachildrentag,分别对应的数据为 {attrs: {id: "app"}}[VNode]('Hello Vue!'文字vnode对象)和 div标签,之后会判断 tag并通过 nodeOpsapi创建真实dom,最后调用 insert插入html中的父节点中,也就是传入的 parentElm参数为html中的父节点。

createElm方法运行完毕后,在 patch方法最后会运行如下代码:

if (isDef(parentElm)) {
    removeVnodes(parentElm, [oldVnode], 0, 0)
}

为什么要最后执行一次此方法,因为在 createElm方法中插入的是新创建的dom节点,而html中旧的节点也就是 oldVnode还存在,所以需要调用此方法判断删除旧的节点。

至此 vm._update过程记录完毕。

原文链接:segmentfault.com

上一篇:Vue打包优化之code spliting-06
下一篇:vue组件-懒加载

相关推荐

  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    4 个月前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问🔗...

    2 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    3 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    3 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 (/public/upload/e221e3db24c3f24a41062b6e4e389df8) 2、出现问题的代码点 (/publ...

    2 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前

官方社区

扫码加入 JavaScript 社区