阅读 683

Vue源码系列一:Vue中的data是如何驱动视图渲染的?

前言

你有没有发现,从小到大,你好像从来没有把一件事情做好过?

说明

这将是一个Vue源码解析的系列文章,该篇是第一章,后续文章“Vue源码分析二:响应式原理,视图更新?(juejin.im/post/684490…)”持续输出中...

正文

大家都知道,Vue的核心思想就是通过数据驱动视图更新,我们对视图的修改全都是通过修改data去触发视图的更新,那么,它的底层原理到底是怎样的呢?本次的源码分析是基于Vue2.6.10进行的,接下来,我们就来一探究竟!

一、new Vue

代码试例:

<template>
    <div id="app">
      {{ message }}
    </div>
</template>
<script>
    var vm = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
</script>

复制代码

那么message到底是如何渲染到视图上的呢?

源码分析:

源码路径:src/core/instance/index.js

/**
 * Vue构造函数
 * @param     {object}    options     new Vue的时候我们传入的那个对象
 */
function Vue (options) {
  // ...
  /* 初始化 */
  this._init(options)
}
复制代码

我们再来看一下 _init() 做了啥子?

源码路径:src/core/instance/init.js

Vue.prototype._init = function (options?: Object) {
    /* 把Vue赋值给vm */
    const vm: Component = this;
    /* 可以看出$options是通过mergeOptions这个方法去合并合并我们传入的options得到的 */
    vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
    )
    // ...
    /* 初始化生命周期 */
    initLifecycle(vm)
    /* 初始化事件对象 */
    initEvents(vm)
    /* 初始化render */
    initRender(vm)
    /* 触发beforeCreate钩子 */
    callHook(vm, 'beforeCreate')
    /* initState 初始化props, data, methods, watch, computed等属性 */
    initState(vm)
    /* 初始化created钩子 */
    callHook(vm, 'created')
    // ...

    if (vm.$options.el) {
      /* 当el属性存在,执行挂载组件 */
      vm.$mount(vm.$options.el)
    }
  }
复制代码

上述源码可以很清楚的发现,_init这个方法主要做了合并配置(options),初始化生命周期,事件中心,渲染函数,以及props, data, methods, watch, computed等属性,并且props, data, methods, watch, computed是在beforeCreate和created这两个生命周期中间才发生的,这也就验证了为什么我们不能在beforeCreate生命周期中去修改data,props等的原因,嘿嘿嘿😊。 最后,我们可以看到如果$options里有el,则触发$mount()方法,进行组件挂载,目标就是把模版渲染成Dom。

二、$mount组件挂载

因为$mount这个方法与平台(web, weex)还有构建方式都有关系,不同的平台有不同的挂载方式,因此Vue源码中实现了好几种,我们主要分析编译版本的$mount。开搞开搞!

源码路径:src/platform/web/entry-runtime-with-compiler.js

/* 把原本不带编译的$mount方法保存下来,在最后会调用 */
const mount = Vue.prototype.$mount
/**
 * 重新定义$mount
 * @param     {string | Element}    el     挂载标签
 * @param     {boolean}    hydrating     服务端渲染标志
 */
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  /* Vue不允许挂载在body或者html根结点上 */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  /* 若没有render方法,则把el或者template字符串转换成render方法 */
  if (!options.render) {
    let template = options.template
    /* 处理模版template,编译成render函数,render不存在的时候才会编译template,否则优先使用render */
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        /* 当template为dom节点的时候 */
        template = template.innerHTML
      } else {
        // ...
      }
    } else if (el) {
      /* 获取template的outerHTML */
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
      /* 编译的入口, 将template编译成render函数,
      * staticRenderFns是编译优化,static静态不需要在VNode更新时进行patch,优化性能
      */
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      /* 将编译成的render赋值给options.render */
      options.render = render
      options.staticRenderFns = staticRenderFns

      // ...
    }
  }
  /* 最后执行一开始缓存下来的原型上的mount */
  return mount.call(this, el, hydrating)
}
复制代码

解析:首先缓存原型上的mount,这个方法不带编译,然后最后去调用。该方法主要作用是将el和template这俩字符串转换成render方法,这是Vue的一个“在线编译”过程,其中编译出来的staticRenderFns属于静态渲染方法,这个方法主要去渲染一些静态文案,标签等,那么在虚拟Dom进行更新的时候就不会触发patch()和diff算法去计算这些静态元素再次更新,属于Vue的一个性能优化。

原型上的$mount

源码路径:src/platform/web/runtime/index.js

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean // 服务端渲染相关的参数
): Component {
  /* 在浏览器环境下转换成DOM对象 */
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
复制代码

解析:我们可以看到,尤大大清晰的标明了public mount method,也就是说这个方法是用来复用滴。我们发现$mount主要调用了mountComponent。

源码路径:src/core/instance/lifecycle.js

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el;
  /* 触发beforeMount钩子 */
  callHook(vm, 'beforeMount')
  
  /* 该方法调用vm._render方法先生成虚拟Node,最终调用vm._update更新 DOM */
  let updateComponent
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      /* 执行渲染 */
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      /* 执行更新 */
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
    /* _update接受的第一个参数是render后的虚拟dom */
      vm._update(vm._render(), hydrating)
    }
  }

  /* 实例化Watcher(观察者对象),执行updateComponent,触发更新 */
  new Watcher(vm, updateComponent, noop, {
    before () {
      /* 更新前先判断实例是否已经挂载并且没有被销毁 */
      if (vm._isMounted && !vm._isDestroyed) {
        /* 执行beforeUpdate钩子 */
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

  /* vm.$vnode表示Vue实例的父虚拟Node,为null表示当前是根Vue实例*/
  if (vm.$vnode == null) {
    // 表示根实例已经挂载
    vm._isMounted = true
    // 执行mounted钩子函数
    callHook(vm, 'mounted')
  }
  return vm
}
复制代码

解析:该方法核心是实例化Watcher(观察者对象),调用updateComponent,updateComponent里先调用 vm._render 方法先生成虚拟 Node,最终调用 vm._update 更新 DOM。Watcher主要有两个作用:
①初始化渲染虚拟Dom;
②当检测到data数据发生变化的时候执行更新;
因此接下来我们会分析vm._render和vm._update这俩核心方法,come on!

三、render

源码路径:src/core/instance/render.js

  /* 渲染出虚拟dom */
  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    
    let vnode
    try {
      // ...
      /* 虚拟node */
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
        // ...
    }
    // ...
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      /* render报错的时候创建一个空的虚拟节点 */
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }
复制代码

解析:主要就是调用了render()去渲染出虚拟dom。因此我们一开始的例子:

<div id="app">
  {{ message }}
</div>
复制代码

编写成render函数就是介个样子:

render: function (createElement) {
  return createElement('div', {
     attrs: {
        id: 'app'
      },
  }, this.message)
}
复制代码

可以发现:render接受一个“createElement”参数,然后我们再看上述源码:

vnode = render.call(vm._renderProxy, vm.$createElement)
复制代码

实锤了:render函数中的 createElement 方法就是 vm.$createElement 方法。而vm.$createElement是在initRender方法中定义的

export function initRender (vm: Component) {
  // ...
  /* 被模版编译成render函数的时候使用,创建VNode节点 */
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  /* 用户手写render函数时调用 */
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}
复制代码

解析:createElement创建了VNode(虚拟节点),那么我们分别来看一下VNode和createElement。

四、VNode(虚拟节点)

源码路径:src/core/vdom/vnode.js

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; 
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  devtoolsMeta: ?Object; // used to store functional render context for devtools
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    /* 当前节点的标签名 */
    this.tag = tag
    /* 当前节点对应的对象,包含了一些具体的数据信息,是一个VNodeData类型 */
    this.data = data
    /* 当前节点的子节点,数组 */
    this.children = children
    /* 当前节点的文本 */
    this.text = text
    /* 当前虚拟节点对应的真实dom节点 */
    this.elm = elm
    /* 当前节点的名字空间 */
    this.ns = undefined
    /* 编译作用域 */
    this.context = context
    /* 函数化组件作用域 */
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    /* 节点的key属性,被当作节点的标志,用以优化 */
    this.key = data && data.key
    /* 组件的options选项 */
    this.componentOptions = componentOptions
    /* 当前节点对应的组件实例 */
    this.componentInstance = undefined
    /* 当前节点的父节点 */
    this.parent = undefined
    /* 是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false */
    this.raw = false
    /* 静态节点的标志 */
    this.isStatic = false
    /* 是否作为根节点插入 */
    this.isRootInsert = true
    /* 是否为注释节点 */
    this.isComment = false
    /* 是否为克隆节点 */
    this.isCloned = false
    /* 是否有v-once指令 */
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }
  
  get child (): Component | void {
    return this.componentInstance
  }
}
复制代码

解析:可以看出,在 Vue.js 中,Virtual DOM 就是用 VNode 这么一个 Class类 去描述的!VNode是对真实DOM的一种抽象描述,它是用来映射到真实DOM到渲染,它的核心属性也就标签名、数据、子节点、键值等,所以看到上述那么多属性密密麻麻,不要产生密集恐惧症哈哈,不要怕,雄起!!!那么映射的过程中,主要经历了create、diff、patch等过程,而create就是通过我们上边提到的createElement来实现的。

五、createElement

源码路径:src/core/vdom/create-elemenet.js

/* 对_createElement的封装,可传入一些灵活的参数,最后调用_createElement */
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}
复制代码
/**
 * 创建元素
 * @param     {Component}    context     VNode上下文环境
 * @param     {string}    tag     元素标签
 * @param         data     VNode的数据
 * @param         children     当前VNode的子节点
 * @param         normalizationType     子节点规范的类型(参考 render 函数是编译生成的还是用户手写的。)
 * @returns    vnode      创建的节点
 */
export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  // ...
  /* 根据render的类型选择规范children的方法 */
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  // ...
  /* 创建VNode */
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // ...
      /*tag是一个string类型,创建一个普通的VNode */
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      /* 如果是一个已注册的组件名,创建一个组件类的VNode */
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    /* tag不是string,则直接创建组件类VNode */
    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()
  }
}
复制代码

解析:以上主要有两个核心流程:
①children的规范化(VNode的子节点);
②VNode 的创建;

children规范化:

由于 Virtual DOM 实际上是一个树状结构,每一个 VNode 可能会有若干个子节点,这些子节点应该也是 VNode 的类型。_createElement 接收的第 4 个参数 children 是任意类型的,因此我们需要把它们规范成 VNode 类型。
这里根据 normalizationType 的不同(就是render是用户手写的还是Vue编译的),当render是Vue编译的,则调用 normalizeChildren(children);如果render是用户手写的,则调用 simpleNormalizeChildren(children) 方法。

源码路径:src/core/vdom/helpers/normalzie-children.js

/* 使用场景是render函数是编译生成的 */
export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}
复制代码

解析:理论上,编译生成的children应该已经是VNode类型了,但这里有一个意外,就是 functional component 函数式组件返回的是一个数组而不是一个根节点,所以会通过 Array.prototype.concat 方法把整个 children 数组打平,让它的深度只有一层,诶,是不是又学了一招打平数组的方法哈哈😊;

/* render函数是用户手写的 */
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}
复制代码

解析:这方法应用在两个场景:
①children只有一个节点的时候,会调用createTextVNode创建一个文本节点的VNode;
②当编译v-for或者slot的时候,children可能是个数组,调用normalizeArrayChildren;

/**
 * 规范children
 * @param     {any}    children     子节点
 * @param     {string}    nestedIndex     嵌套层数的索引
 */
function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  const res = []
  let i, c, lastIndex, last
  for (i = 0; i < children.length; i++) {
    /* 获取到children的每个节点 */
    c = children[i]
    if (isUndef(c) || typeof c === 'boolean') continue
    lastIndex = res.length - 1
    last = res[lastIndex]
    /* 判断children每个节点是否是数组,是的话循环递归 */
    if (Array.isArray(c)) {
      if (c.length > 0) {
        c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
        // merge adjacent text nodes
        if (isTextNode(c[0]) && isTextNode(last)) {
          res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
          c.shift()
        }
        res.push.apply(res, c)
      }
    } else if (isPrimitive(c)) {
      if (isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
        res.push(createTextVNode(c))
      }
    } else {
      if (isTextNode(c) && isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        /* 给children的每一层设置唯一的key */
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res
}
复制代码

解析:normalizeArrayChildren主要作用就是遍历 children,获得单个节点 c,然后对 c 的类型判断,如果是一个数组类型,则递归调用 normalizeArrayChildren; 如果是基础类型,则通过 createTextVNode 方法转换成 VNode 类型;否则就已经是 VNode 类型了,如果 children 是一个列表并且列表还存在嵌套的情况,则根据 nestedIndex 去更新它的 key。
经过上述一顿操作,就把children 变成了一个类型为 VNode 的 Array。
回到_createElement里的创建VNode的部分,此时的children已经被教育好了,乖了,老老实实的编程VNode类型了:

/* 创建VNode */
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // ...
      /*tag是一个string类型,创建一个普通的VNode */
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      /* 如果是一个已注册的组件名,创建一个组件类的VNode */
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    /* tag不是string,则直接创建组件类VNode */
    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()
  }
复制代码

解析:先对 tag 做判断,如果是 string 类型,则接着判断如果是内置的一些节点,则直接创建一个普通 VNode,如果是为已注册的组件名,则通过 createComponent 创建一个组件类型的 VNode,否则创建一个未知的标签的 VNode。 如果是 tag 一个 Component 类型,则直接调用 createComponent 创建一个组件类型的 VNode 节点。
因此,我们大致了解了 createElement 创建 VNode 的过程,每个 VNode 有 children,children 每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree。
那么VNode已经被创建出来了,那它是如何渲染成真实DOM的呢?答案:通过vm._update完成。

六、update

源码路径:src/core/instance/lifecycle.js

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    /* 还没有vnode的时候即第一次渲染 */
    if (!prevVnode) {
      /**
       * 初始化渲染
       * @param {Element} vm.$el   Dom对象
       */
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      /* 更新阶段 */
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()、
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
  }
复制代码

解析:_update主要执行了vm.__patch__方法。

源码路径:src/platforms/web/runtime/index.js

Vue.prototype.__patch__ = inBrowser ? patch : noop
复制代码

可以发现,这个方法在不同的平台,不同的环境有不同的表现方式,我们只看它在web平台的表现方式;

源码路径: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'

/* 定义了一些模块的钩子函数的实现 */
const modules = platformModules.concat(baseModules)

export const patch: Function = createPatchFunction({ nodeOps, modules })
复制代码

解析:该方法的定义是调用 createPatchFunction 方法的返回值,这里传入了一个对象,包含 nodeOps 参数和 modules 参数。其中,nodeOps 封装了一系列 DOM 操作的方法,modules 定义了一些模块的钩子函数的实现。
接下来我们来看createPatchFunction的实现:

源码路径:src/core/vdom/patch.js

export function createPatchFunction (backend) {
  // ...
  /**
   * 功能说明
   *
   * @param     {Element}    oldVnode     旧的Vnode节点,可以为空或者是一个Dom对象
   * @param     {Element}    vnode     执行_render后返回的VNode节点
   * @param         hydrating     是否是服务端渲染
   * @param         removeOnly    给 transition-group 用的
   */
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    /* vnode不存在直接调用销毁钩子 */
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []

    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      /* oldVnode未定义的时候,其实也就是root节点,创建一个新的节点 */
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      /* 标记旧的VNode是否有nodeType */
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        /* 是同一个节点的时候直接修改现有的节点 */
        /* 注意⚠️:当oldVnode与vnode在sameVnode的时候才会进行patchVnode,也就是新旧VNode节点判定为同一节点的时候才会进行patchVnode这个过程,否则就是创建新的DOM,移除旧的DOM */
        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)) {
            /* 当旧的VNode是服务端渲染的元素, hydrating=true*/
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
            /*需要合并到真实DOM上*/
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              /*调用insert钩子*/
              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
          /*如果不是服务端渲染或者合并到真实DOM失败,则创建一个空的VNode节点替换它*/
          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)) {
          /* 组件根节点被替换,遍历更新父节点element */
          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) {
              /*调用create回调*/
              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)) {
          /*调用destroy钩子*/
          invokeDestroyHook(oldVnode)
        }
      }
    }
    /*调用insert钩子*/
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
}
复制代码

解析:createPatchFunction内部定义了一系列的辅助方法,前边的内容我们暂时不看,代码老长了,心累💔。 上边的源码我们可以先不看,通过例子来一步一步分析。 它主要返回了patch这个方法,即我们上边提到的vm.__patch__;
先看patch这个方法,它接受的参数我已经在源码里标明了;
我们来拿一开始的例子解析:

var app = new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement('div', {
      attrs: {
        id: 'app'
      },
    }, this.message)
  },
  data: {
    message: 'Hello Vue!'
  }
})
复制代码

然后我们在 vm._update 的方法里是这么调用 patch 方法的:

vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
复制代码

分析一波:我们的例子一上来肯定是首次渲染,那么执行patch的时候,传入的vm.$el就是id为app的DOM对象了,而vnode就是上边我们通过vm._render渲染之后的虚拟VNode。先看patch中的部分逻辑:

      /* 标记oldVnode是否有nodeType,是否是真实Dom */
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        /* 当判断出新老node属于同一个节点的时候直接修改现有的节点 */
        /* 注意⚠️:当oldVnode与vnode在sameVnode的时候才会进行patchVnode,也就是新旧VNode节点判定为同一节点的时候才会进行patchVnode这个过程,否则就是创建新的DOM,移除旧的DOM */
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } else {
        if (isRealElement) {
          // ...
          if (isTrue(hydrating)) {
            /*需要合并到真实DOM上*/
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              /*调用insert钩子*/
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            }
            // ...
          }
          /*如果不是服务端渲染或者合并到真实DOM失败,则创建一个空的VNode节点替换它*/
          oldVnode = emptyNodeAt(oldVnode)
        }
        
        /*取代现有元素*/
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        /* 创建真实节点 */
        createElm(
          vnode,
          insertedVnodeQueue,
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )
        if (isDef(vnode.parent)) {
          /* 组件根节点被替换,遍历更新父节点element */
          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) {
              /*调用create回调*/
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                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)) {
          /*调用destroy钩子*/
          invokeDestroyHook(oldVnode)
        }
      }
复制代码

解析:通过源码和我们的例子可以看出:我们传入的oldVnode实际上是Dom container,也就是vm.$el,接下来又通过 emptyNodeAt 方法把 oldVnode 转换成 VNode 对象,然后再调用 createElm 方法,创建真实的节点:

/* 将虚拟节点创建成真实节点,并插入到它的父节点中 */
  function createElm (
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    index
  ) {
    // ...

    vnode.isRootInsert = !nested // for transition enter check
    /* createComponent创建子组件,当前返回值为false */
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    if (isDef(tag)) {
      // ...
      /* 调用平台 DOM 的操作去创建一个占位符元素 */
      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)
      setScope(vnode)

      if (__WEEX__) {
        // ...
      } else {
        /* 创建子元素 */
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          /* 执行所有的 create 的钩子并把 vnode push 到 insertedVnodeQueue */
          invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        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)
    }
  }
复制代码

解析:先调用createChildren去创建子元素,然后执行invokeCreateHooks把虚拟VNode全部推到insertedVnodeQueue中去,再执行insert把Dom插入到父节点中去。

先来看一下createChildren:

/* 创建子元素 */
  function createChildren (vnode, children, insertedVnodeQueue) {
    if (Array.isArray(children)) {
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(children)
      }
      for (let i = 0; i < children.length; ++i) {
        createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
      }
    } else if (isPrimitive(vnode.text)) {
      nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
    }
  }
复制代码

解析:createChildren是遍历子虚拟节点,递归调用 createElm,这是一种常用的深度优先的遍历算法。

invokeCreateHooks先不看了,有兴趣到可以自己看一下

再看:insert

/* 递归调用该方法,将dom循环插入parent节点中去 */
function insert (parent, elm, ref) {
    if (isDef(parent)) {
      if (isDef(ref)) {
        if (nodeOps.parentNode(ref) === parent) {
          nodeOps.insertBefore(parent, elm, ref)
        }
      } else {
        nodeOps.appendChild(parent, elm)
      }
    }
}
复制代码

解析:因为是递归调用,子元素会优先调用 insert,所以整个 vnode 树节点的插入顺序是先子后父。

看看insertBefore和appendChild:

源码路径: src/platforms/web/runtime/node-ops.js

export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  parentNode.insertBefore(newNode, referenceNode)
}

export function appendChild (node: Node, child: Node) {
  node.appendChild(child)
}
复制代码

解析:是不是恍然大明白儿了,是的,Vue就是调用DOM的原生Api进行DOM操作的。
然后回到我们的例子:
在 createElm 过程中,如果 vnode 节点不包含 tag,则它有可能是一个注释或者纯文本节点,可以直接插入到父元素中。在我们这个例子中,最内层就是一个文本 vnode,它的 text 值取的就是之前的 this.message 的值 Hello Vue!
再回到 patch 方法,首次渲染我们调用了 createElm 方法,这里传入的 parentElm 是 oldVnode.elm 的父元素,在我们的例子是 id 为 #app div 的父元素,也就是 Body;实际上整个过程就是递归创建了一个完整的 DOM 树并插入到 Body 上。

七、总结

好啦,终于叭叭儿完了,好累好累😄。
那么最后,我们来总结一下子,是不是忘的差不多了啊😂。
先放一张黄轶老师的图:

总结:首先,我们new一个Vue实例,然后执行了Vue的_init方法,主要是进行了一系列的初始化渲染函数,然后执行了$mount方法,把el和template转成render方法,然后调用了mountComponent方法,执行了 vm._render 方法,然后_render生成VNode虚拟DOM,接着通过vm._update,patch方法,调用createElem(),循环递归把children插入到他们的父节点中去,将虚拟DOM渲染成真实DOM,哈哈,是不是又巩固了一波。

后言

本文章主要参考了:
1.黄轶老师的源码分析:(ustbhuangyi.github.io/vue-analysi…)
2.染墨大佬的源码分析:(github.com/answershuto…)
第一次在掘金发表文章,希望各路大佬批评指正文中的错误表达,该表扬👍就表扬,该喷就喷(我的内心相对还是比较坚强的😢)