Vue源码分析(二) : Vue实例挂载

author: @TiffanysBear

实例挂载主要是 $mount 方法的实现，在 src/platforms/web/entry-runtime-with-compiler.js & src/platforms/web/runtime/index.js 等文件中都有对Vue.prototype.$mount的定义:

  1. // vue/platforms/web/entry-runtime-with-compiler.js
  3. Vue.prototype.$mount = function (
  4.   el?: string | Element,
  5.   hydrating?: boolean
  6. ): Component {
  7.   el = el && query(el)
  9.   /* istanbul ignore if */
  10.   if (el === document.body || el === document.documentElement) {
  11.     process.env.NODE_ENV !== 'production' && warn(
  12.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  13.     )
  14.     return this
  15.   }
  17.   const options = this.$options
  18.   // resolve template/el and convert to render function
  19.   if (!options.render) {
  20.     let template = options.template
  21.     if (template) {
  22.       if (typeof template === 'string') {
  23.         if (template.charAt(0) === '#') {
  24.           template = idToTemplate(template)
  25.           /* istanbul ignore if */
  26.           if (process.env.NODE_ENV !== 'production' && !template) {
  27.             warn(
  28.               `Template element not found or is empty: ${options.template}`,
  29.               this
  30.             )
  31.           }
  32.         }
  33.       } else if (template.nodeType) {
  34.         template = template.innerHTML
  35.       } else {
  36.         if (process.env.NODE_ENV !== 'production') {
  37.           warn('invalid template option:' + template, this)
  38.         }
  39.         return this
  40.       }
  41.     } else if (el) {
  42.       template = getOuterHTML(el)
  43.     }
  44.     if (template) {
  45.       /* istanbul ignore if */
  46.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  47.         mark('compile')
  48.       }
  50.       const { render, staticRenderFns } = compileToFunctions(template, {
  51.         outputSourceRange: process.env.NODE_ENV !== 'production',
  52.         shouldDecodeNewlines,
  53.         shouldDecodeNewlinesForHref,
  54.         delimiters: options.delimiters,
  55.         comments: options.comments
  56.       }, this)
  57.       options.render = render
  58.       options.staticRenderFns = staticRenderFns
  60.       /* istanbul ignore if */
  61.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  62.         mark('compile end')
  63.         measure(`vue ${this._name} compile`, 'compile', 'compile end')
  64.       }
  65.     }
  66.   }
  67.   return mount.call(this, el, hydrating)
  68. }

$mount方法进来会先进行缓存，之后再进行覆盖重写，再重写的方法里面会调用之前缓存的mount方法，这种做法是因为，多个平台platform的mount方法不同，在入口处进行重写，使后续的多入口能够复用公用定义的mount方法（原先原型上的 $mount 方法在 src/platform/web/runtime/index.js 中定义）。

在$mount方法中，会先判断options中 el 是否存在，再判断 render （有template存在的条件下也需要有render函数），之后再是再判断template，会对template做一定的校验，最后使用 compileToFunctions 将template转化为render 和 staticRenderFns.

compileToFunctions编译过程就放在下面文章中再详细解释。

mountComponent方法定义在 src/core/instance/lifecycle.js中，

  1. // src/core/instance/lifecycle.js
  2. export function mountComponent (
  3.   vm: Component,
  4.   el: ?Element,
  5.   hydrating?: boolean
  6. ): Component {
  7.   vm.$el = el
  8.   if (!vm.$options.render) {
  9.     vm.$options.render = createEmptyVNode
  10.     if (process.env.NODE_ENV !== 'production') {
  11.       /* istanbul ignore if */
  12.       if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
  13.         vm.$options.el || el) {
  14.         warn(
  15.           'You are using the runtime-only build of Vue where the template ' +
  16.           'compiler is not available. Either pre-compile the templates into ' +
  17.           'render functions, or use the compiler-included build.',
  18.           vm
  19.         )
  20.       } else {
  21.         warn(
  22.           'Failed to mount component: template or render function not defined.',
  23.           vm
  24.         )
  25.       }
  26.     }
  27.   }
  28.   callHook(vm, 'beforeMount')
  30.   let updateComponent
  31.   /* istanbul ignore if */
  32.   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  33.     updateComponent = () => {
  34.       const name = vm._name
  35.       const id = vm._uid
  36.       const startTag = `vue-perf-start:${id}`
  37.       const endTag = `vue-perf-end:${id}`
  39.       mark(startTag)
  40.       const vnode = vm._render()
  41.       mark(endTag)
  42.       measure(`vue ${name} render`, startTag, endTag)
  44.       mark(startTag)
  45.       vm._update(vnode, hydrating)
  46.       mark(endTag)
  47.       measure(`vue ${name} patch`, startTag, endTag)
  48.     }
  49.   } else {
  50.     updateComponent = () => {
  51.       vm._update(vm._render(), hydrating)
  52.     }
  53.   }
  55.   // we set this to vm._watcher inside the watcher's constructor
  56.   // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  57.   // component's mounted hook), which relies on vm._watcher being already defined
  58.   new Watcher(vm, updateComponent, noop, {
  59.     before () {
  60.       if (vm._isMounted && !vm._isDestroyed) {
  61.         callHook(vm, 'beforeUpdate')
  62.       }
  63.     }
  64.   }, true /* isRenderWatcher */)
  65.   hydrating = false
  67.   // manually mounted instance, call mounted on self
  68.   // mounted is called for render-created child components in its inserted hook
  69.   if (vm.$vnode == null) {
  70.     vm._isMounted = true
  71.     callHook(vm, 'mounted')
  72.   }
  73.   return vm
  74. }

从上面的代码可以看到，mountComponent 核心就是先实例化一个渲染Watcher(字段isRenderWatcher)，在它的回调函数中会调用 updateComponent 方法，在此方法中调用 vm._render 方法先生成虚拟 Node，最终调用 vm._update 更新 DOM。

Watcher 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数，这块儿我们会在之后的章节中介绍。

函数最后判断为根节点的时候设置 vm._isMounted 为 true， 表示这个实例已经挂载了，同时执行 mounted 钩子函数。 这里注意 vm.$vnode 表示 Vue 实例的父虚拟 Node，所以它为 Null 则表示当前是根 Vue 的实例。

因此接下来分析的重点在于：vm._update 和 m._render

_render

Vue的_render是实例的一个私有方法，定义在 src/core/instance/render.js文件中，返回一个虚拟节点vnode。

  1. // src/core/instance/render.js
  3.  Vue.prototype._render = function (): VNode {
  4.     const vm: Component = this
  5.     const { render, _parentVnode } = vm.$options
  7.     if (_parentVnode) {
  8.       vm.$scopedSlots = normalizeScopedSlots(
  9.         _parentVnode.data.scopedSlots,
  10.         vm.$slots,
  11.         vm.$scopedSlots
  12.       )
  13.     }
  15.     // set parent vnode. this allows render functions to have access
  16.     // to the data on the placeholder node.
  17.     vm.$vnode = _parentVnode
  18.     // render self
  19.     let vnode
  20.     try {
  21.       // There's no need to maintain a stack because all render fns are called
  22.       // separately from one another. Nested component's render fns are called
  23.       // when parent component is patched.
  24.       currentRenderingInstance = vm
  25.       vnode = render.call(vm._renderProxy, vm.$createElement)
  26.     } catch (e) {
  27.       handleError(e, vm, `render`)
  28.       // return error render result,
  29.       // or previous vnode to prevent render error causing blank component
  30.       /* istanbul ignore else */
  31.       if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
  32.         try {
  33.           vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
  34.         } catch (e) {
  35.           handleError(e, vm, `renderError`)
  36.           vnode = vm._vnode
  37.         }
  38.       } else {
  39.         vnode = vm._vnode
  40.       }
  41.     } finally {
  42.       currentRenderingInstance = null
  43.     }
  44.     // if the returned array contains only a single node, allow it
  45.     if (Array.isArray(vnode) && vnode.length === 1) {
  46.       vnode = vnode[0]
  47.     }
  48.     // return empty vnode in case the render function errored out
  49.     if (!(vnode instanceof VNode)) {
  50.       if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
  51.         warn(
  52.           'Multiple root nodes returned from render function. Render function ' +
  53.           'should return a single root node.',
  54.           vm
  55.         )
  56.       }
  57.       vnode = createEmptyVNode()
  58.     }
  59.     // set parent
  60.     vnode.parent = _parentVnode
  61.     return vnode
  62.   }

这段函数方法的重点在于render方法的调用，第一种是分为手写的render函数，这种并不常用，比较常用的是template模板，在之前的 mounted 方法的实现时，会将template编译为一个render函数。

其中vm._renderProxy是定义在/src/core/instance/proxy.js文件中，判断如果支持Proxy，如果不支持，返回的是vm，支持的话返回用Proxy代理的vm。

  1.   // src/core/instance/proxy.js
  2.   initProxy = function initProxy (vm) {
  3.     if (hasProxy) {
  4.       // determine which proxy handler to use
  5.       const options = vm.$options
  6.       const handlers = options.render && options.render._withStripped
  7.         ? getHandler
  8.         : hasHandler
  9.       vm._renderProxy = new Proxy(vm, handlers)
  10.     } else {
  11.       vm._renderProxy = vm
  12.     }
  13.   }

其中vm.$createElement也就是在 src/core/instance/render.js文件中：

  1. // src/core/instance/render.js
  3. import { createElement } from '../vdom/create-element'
  4. // bind the createElement fn to this instance
  5. // so that we get proper render context inside it.
  6. // args order: tag, data, children, normalizationType, alwaysNormalize
  7. // internal version is used by render functions compiled from templates
  8. vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  9. // normalization is always applied for the public version, used in
  10. // user-written render functions.
  11. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

可以从注释中看出：

vm._c是template模板编译为render function时使用的；

vm.$createElement是用户手写的render function时使用；

这两个函数的支持的参数相同，并且内部都调用了 vdom/create-element 的 createElement方法。

Virtual DOM

在讲_update方法之前，了解下Virtual DOM到底是什么？

Virtual DOM也就是虚拟DOM，是真实数据和页面DOM元素之前的缓冲；数据一变化，并不是立马更新所有视图，而是先更新虚拟DOM，再将虚拟DOM和真实DOM进行对比diff，发生变化的部分再更新到真实DOM中，未发生变化的部分，则不进行更新。

下面是Vue对于VNode的定义：

  1. // vue/src/core/vdom/vnode.js
  2. export default class VNode {
  3.   tag: string | void;
  4.   data: VNodeData | void;
  5.   children: ?Array<VNode>;
  6.   text: string | void;
  7.   elm: Node | void;
  8.   ns: string | void;
  9.   context: Component | void; // rendered in this component's scope
  10.   key: string | number | void;
  11.   componentOptions: VNodeComponentOptions | void;
  12.   componentInstance: Component | void; // component instance
  13.   parent: VNode | void; // component placeholder node
  15.   // strictly internal
  16.   raw: boolean; // contains raw HTML? (server only)
  17.   isStatic: boolean; // hoisted static node
  18.   isRootInsert: boolean; // necessary for enter transition check
  19.   isComment: boolean; // empty comment placeholder?
  20.   isCloned: boolean; // is a cloned node?
  21.   isOnce: boolean; // is a v-once node?
  22.   asyncFactory: Function | void; // async component factory function
  23.   asyncMeta: Object | void;
  24.   isAsyncPlaceholder: boolean;
  25.   ssrContext: Object | void;
  26.   fnContext: Component | void; // real context vm for functional nodes
  27.   fnOptions: ?ComponentOptions; // for SSR caching
  28.   devtoolsMeta: ?Object; // used to store functional render context for devtools
  29.   fnScopeId: ?string; // functional scope id support
  31.   constructor (
  32.     tag?: string,
  33.     data?: VNodeData,
  34.     children?: ?Array<VNode>,
  35.     text?: string,
  36.     elm?: Node,
  37.     context?: Component,
  38.     componentOptions?: VNodeComponentOptions,
  39.     asyncFactory?: Function
  40.   ) {
  41.     this.tag = tag
  42.     this.data = data
  43.     this.children = children
  44.     this.text = text
  45.     this.elm = elm
  46.     this.ns = undefined
  47.     this.context = context
  48.     this.fnContext = undefined
  49.     this.fnOptions = undefined
  50.     this.fnScopeId = undefined
  51.     this.key = data && data.key
  52.     this.componentOptions = componentOptions
  53.     this.componentInstance = undefined
  54.     this.parent = undefined
  55.     this.raw = false
  56.     this.isStatic = false
  57.     this.isRootInsert = true
  58.     this.isComment = false
  59.     this.isCloned = false
  60.     this.isOnce = false
  61.     this.asyncFactory = asyncFactory
  62.     this.asyncMeta = undefined
  63.     this.isAsyncPlaceholder = false
  64.   }
  66.   // DEPRECATED: alias for componentInstance for backwards compat.
  67.   /* istanbul ignore next */
  68.   get child (): Component | void {
  69.     return this.componentInstance
  70.   }
  71. }

实际上 Vue.js 中 Virtual DOM 是借鉴了一个开源库 snabbdom 的实现，如果对Virtual DOM感兴趣的话，可以参考virtual-dom，正如其介绍，

A JavaScript DOM model supporting element creation, diff computation and patch operations for efficient re-rendering

VNode是对真实DOM的抽象描述，主要是由几个关键属性、标签名等数据组成，并不是很复杂，主要复杂的对VNode的create、diff、patch等过程。

createElement是怎么实现的

方法入口

Vue.js通过文件 src/core/vdom/create-element.js 来创建VNode元素：

  1. // src/core/vdom/create-element.js
  3. // wrapper function for providing a more flexible interface
  4. // without getting yelled at by flow
  5. export function createElement (
  6.   context: Component,
  7.   tag: any,
  8.   data: any,
  9.   children: any,
  10.   normalizationType: any,
  11.   alwaysNormalize: boolean
  12. ): VNode | Array<VNode> {
  13.   if (Array.isArray(data) || isPrimitive(data)) {
  14.     normalizationType = children
  15.     children = data
  16.     data = undefined
  17.   }
  18.   if (isTrue(alwaysNormalize)) {
  19.     normalizationType = ALWAYS_NORMALIZE
  20.   }
  21.   return _createElement(context, tag, data, children, normalizationType)
  22. }
  24. export function _createElement (
  25.   context: Component,
  26.   tag?: string | Class<Component> | Function | Object,
  27.   data?: VNodeData,
  28.   children?: any,
  29.   normalizationType?: number
  30. ): VNode | Array<VNode> {
  31.   if (isDef(data) && isDef((data: any).__ob__)) {
  32.     process.env.NODE_ENV !== 'production' && warn(
  33.       `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
  34.       'Always create fresh vnode data objects in each render!',
  35.       context
  36.     )
  37.     return createEmptyVNode()
  38.   }
  39.   // object syntax in v-bind
  40.   if (isDef(data) && isDef(data.is)) {
  41.     tag = data.is
  42.   }
  43.   if (!tag) {
  44.     // in case of component :is set to falsy value
  45.     return createEmptyVNode()
  46.   }
  47.   // warn against non-primitive key
  48.   if (process.env.NODE_ENV !== 'production' &&
  49.     isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  50.   ) {
  51.     if (!__WEEX__ || !('@binding' in data.key)) {
  52.       warn(
  53.         'Avoid using non-primitive value as key, ' +
  54.         'use string/number value instead.',
  55.         context
  56.       )
  57.     }
  58.   }
  59.   // support single function children as default scoped slot
  60.   if (Array.isArray(children) &&
  61.     typeof children[0] === 'function'
  62.   ) {
  63.     data = data || {}
  64.     data.scopedSlots = { default: children[0] }
  65.     children.length = 0
  66.   }
  67.   if (normalizationType === ALWAYS_NORMALIZE) {
  68.     children = normalizeChildren(children)
  69.   } else if (normalizationType === SIMPLE_NORMALIZE) {
  70.     children = simpleNormalizeChildren(children)
  71.   }
  72.   let vnode, ns
  73.   if (typeof tag === 'string') {
  74.     let Ctor
  75.     ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
  76.     if (config.isReservedTag(tag)) {
  77.       // platform built-in elements
  78.       if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
  79.         warn(
  80.           `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
  81.           context
  82.         )
  83.       }
  84.       vnode = new VNode(
  85.         config.parsePlatformTagName(tag), data, children,
  86.         undefined, undefined, context
  87.       )
  88.     } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
  89.       // component
  90.       vnode = createComponent(Ctor, data, context, children, tag)
  91.     } else {
  92.       // unknown or unlisted namespaced elements
  93.       // check at runtime because it may get assigned a namespace when its
  94.       // parent normalizes children
  95.       vnode = new VNode(
  96.         tag, data, children,
  97.         undefined, undefined, context
  98.       )
  99.     }
  100.   } else {
  101.     // direct component options / constructor
  102.     vnode = createComponent(tag, data, context, children)
  103.   }
  104.   if (Array.isArray(vnode)) {
  105.     return vnode
  106.   } else if (isDef(vnode)) {
  107.     if (isDef(ns)) applyNS(vnode, ns)
  108.     if (isDef(data)) registerDeepBindings(data)
  109.     return vnode
  110.   } else {
  111.     return createEmptyVNode()
  112.   }
  113. }

重点是对于 simpleNormalizeChildren 和 normalizeChildren 的处理，基本的操作就是将树状结构的children数组打平成一维数组。

normalizeArrayChildren 也就是将createElement的第三个参数，即将children不断遍历打平，不断往res里面push数据，只要是数据Array类型就不断遍历，直到是基础类型TextNode，再进行createTextVNode进行创建。

还有对于组件Component的创建，此处先按下不讲，下文再讲。

  1. // The template compiler attempts to minimize the need for normalization by
  2. // statically analyzing the template at compile time.
  3. //
  4. // For plain HTML markup, normalization can be completely skipped because the
  5. // generated render function is guaranteed to return Array<VNode>. There are
  6. // two cases where extra normalization is needed:
  8. // 1. When the children contains components - because a functional component
  9. // may return an Array instead of a single root. In this case, just a simple
  10. // normalization is needed - if any child is an Array, we flatten the whole
  11. // thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
  12. // because functional components already normalize their own children.
  13. export function simpleNormalizeChildren (children: any) {
  14.   for (let i = 0; i < children.length; i++) {
  15.     if (Array.isArray(children[i])) {
  16.       return Array.prototype.concat.apply([], children)
  17.     }
  18.   }
  19.   return children
  20. }
  22. // 2. When the children contains constructs that always generated nested Arrays,
  23. // e.g. <template>, <slot>, v-for, or when the children is provided by user
  24. // with hand-written render functions / JSX. In such cases a full normalization
  25. // is needed to cater to all possible types of children values.
  26. export function normalizeChildren (children: any): ?Array<VNode> {
  27.   return isPrimitive(children)
  28.     ? [createTextVNode(children)]
  29.     : Array.isArray(children)
  30.       ? normalizeArrayChildren(children)
  31.       : undefined
  32. }
  34. function isTextNode (node): boolean {
  35.   return isDef(node) && isDef(node.text) && isFalse(node.isComment)
  36. }
  38. function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  39.   const res = []
  40.   let i, c, lastIndex, last
  41.   for (i = 0; i < children.length; i++) {
  42.     c = children[i]
  43.     if (isUndef(c) || typeof c === 'boolean') continue
  44.     lastIndex = res.length - 1
  45.     last = res[lastIndex]
  46.     //  nested
  47.     if (Array.isArray(c)) {
  48.       if (c.length > 0) {
  49.         c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
  50.         // merge adjacent text nodes
  51.         if (isTextNode(c[0]) && isTextNode(last)) {
  52.           res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
  53.           c.shift()
  54.         }
  55.         res.push.apply(res, c)
  56.       }
  57.     } else if (isPrimitive(c)) {
  58.       if (isTextNode(last)) {
  59.         // merge adjacent text nodes
  60.         // this is necessary for SSR hydration because text nodes are
  61.         // essentially merged when rendered to HTML strings
  62.         res[lastIndex] = createTextVNode(last.text + c)
  63.       } else if (c !== '') {
  64.         // convert primitive to vnode
  65.         res.push(createTextVNode(c))
  66.       }
  67.     } else {
  68.       if (isTextNode(c) && isTextNode(last)) {
  69.         // merge adjacent text nodes
  70.         res[lastIndex] = createTextVNode(last.text + c.text)
  71.       } else {
  72.         // default key for nested array children (likely generated by v-for)
  73.         if (isTrue(children._isVList) &&
  74.           isDef(c.tag) &&
  75.           isUndef(c.key) &&
  76.           isDef(nestedIndex)) {
  77.           c.key = `__vlist${nestedIndex}_${i}__`
  78.         }
  79.         res.push(c)
  80.       }
  81.     }
  82.   }
  83.   return res
  84. }

_update

_update这一步实际是VNode最终去生成真实DOM的过程。

对于_update方法的定义，在 src/core/instance/lifecycle.js 中：

  1.   Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  2.     const vm: Component = this
  3.     const prevEl = vm.$el
  4.     const prevVnode = vm._vnode
  5.     const restoreActiveInstance = setActiveInstance(vm)
  6.     vm._vnode = vnode
  7.     // Vue.prototype.__patch__ is injected in entry points
  8.     // based on the rendering backend used.
  9.     if (!prevVnode) {
  10.       // initial render
  11.       vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  12.     } else {
  13.       // updates
  14.       vm.$el = vm.__patch__(prevVnode, vnode)
  15.     }
  16.     restoreActiveInstance()
  17.     // update __vue__ reference
  18.     if (prevEl) {
  19.       prevEl.__vue__ = null
  20.     }
  21.     if (vm.$el) {
  22.       vm.$el.__vue__ = vm
  23.     }
  24.     // if parent is an HOC, update its $el as well
  25.     if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
  26.       vm.$parent.$el = vm.$el
  27.     }
  28.     // updated hook is called by the scheduler to ensure that children are
  29.     // updated in a parent's updated hook.
  30.   }

可以看出，主要是对__patch__方法的调用，分别是首次渲染和数据更新的时候会调用；这次先是分析首次调用时，数据更新的部分会在之后响应式原理的时候再进行分析。

_update的主要目的就是将虚拟DOM渲染生成真实的DOM元素。

而__patch__方法在不同平台的调用是不同的，在浏览器中时，是patch方法，而在非浏览器环境中，比如node后端环境时，是一个noop空函数，主要也是因为只要在浏览器环境时才会有DOM元素。

文件：src/platforms/web/runtime/index.js

  1. import { patch } from './patch'
  3. // install platform patch function
  4. Vue.prototype.__patch__ = inBrowser ? patch : noop

最终 patch 调用的是 src/core/vdom/patch.js 中的 createPatchFunction ，其中有个采用闭包来判断环境的技巧，因为patch方法可能是会在 weex 或者 浏览器端 上调用，如果每次调用都 if else 判断一遍，浪费性能不说，还增加了冗余的判断。于是，它采用了通过闭包判断再返回函数覆盖 patch 的方法，这样环境差异就只会判断一次，进而再次执行的时候，就不会再次判断环境。

  1. export function createPatchFunction (backend) {
  2.     // 环境判断
  3.     // ...
  5.     return function patch (oldVnode, vnode, hydrating, removeOnly) {
  6.         // ...
  7.     }
  9. }

同时，createPatchFunction 内部定义了一系列的辅助方法。

所以从例子来分析：

  1. var app = new Vue({
  2.   el: '#app',
  3.   render: function (createElement) {
  4.     return createElement('div', {
  5.       attrs: {
  6.         id: 'app'
  7.       },
  8.     }, this.message)
  9.   },
  10.   data: {
  11.     message: 'Hello Vue!'
  12.   }
  13. })

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

  1. // initial render
  2. vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

结合例子，在首次渲染时，所以在执行 patch 函数的时候，传入的 vm.$el 对应的是例子中 id 为 app 的 DOM 对象，这个也就是 <div id="app">， vm.$el 的赋值是在之前 mountComponent 函数做的，vnode 对应的是调用 render 函数的返回值，hydrating 在非服务端渲染情况下为 false，removeOnly 为 false。

  1. function patch (oldVnode, vnode, hydrating, removeOnly) {
  2.     if (isUndef(vnode)) {
  3.       if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
  4.       return
  5.     }
  7.     let isInitialPatch = false
  8.     const insertedVnodeQueue = []
  10.     if (isUndef(oldVnode)) {
  11.       // empty mount (likely as component), create new root element
  12.       isInitialPatch = true
  13.       createElm(vnode, insertedVnodeQueue)
  14.     } else {
  15.       const isRealElement = isDef(oldVnode.nodeType)
  16.       if (!isRealElement && sameVnode(oldVnode, vnode)) {
  17.         // patch existing root node
  18.         patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
  19.       } else {
  20.         if (isRealElement) {
  21.           // mounting to a real element
  22.           // check if this is server-rendered content and if we can perform
  23.           // a successful hydration.
  24.           if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
  25.             oldVnode.removeAttribute(SSR_ATTR)
  26.             hydrating = true
  27.           }
  28.           if (isTrue(hydrating)) {
  29.             if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
  30.               invokeInsertHook(vnode, insertedVnodeQueue, true)
  31.               return oldVnode
  32.             } else if (process.env.NODE_ENV !== 'production') {
  33.               warn(
  34.                 'The client-side rendered virtual DOM tree is not matching ' +
  35.                 'server-rendered content. This is likely caused by incorrect ' +
  36.                 'HTML markup, for example nesting block-level elements inside ' +
  37.                 '<p>, or missing <tbody>. Bailing hydration and performing ' +
  38.                 'full client-side render.'
  39.               )
  40.             }
  41.           }
  42.           // either not server-rendered, or hydration failed.
  43.           // create an empty node and replace it
  44.           oldVnode = emptyNodeAt(oldVnode)
  45.         }
  47.         // replacing existing element
  48.         const oldElm = oldVnode.elm
  49.         const parentElm = nodeOps.parentNode(oldElm)
  51.         // create new node
  52.         createElm(
  53.           vnode,
  54.           insertedVnodeQueue,
  55.           // extremely rare edge case: do not insert if old element is in a
  56.           // leaving transition. Only happens when combining transition +
  57.           // keep-alive + HOCs. (#4590)
  58.           oldElm._leaveCb ? null : parentElm,
  59.           nodeOps.nextSibling(oldElm)
  60.         )
  62.         // update parent placeholder node element, recursively
  63.         if (isDef(vnode.parent)) {
  64.           let ancestor = vnode.parent
  65.           const patchable = isPatchable(vnode)
  66.           while (ancestor) {
  67.             for (let i = 0; i < cbs.destroy.length; ++i) {
  68.               cbs.destroy[i](ancestor)
  69.             }
  70.             ancestor.elm = vnode.elm
  71.             if (patchable) {
  72.               for (let i = 0; i < cbs.create.length; ++i) {
  73.                 cbs.create[i](emptyNode, ancestor)
  74.               }
  75.               // #6513
  76.               // invoke insert hooks that may have been merged by create hooks.
  77.               // e.g. for directives that uses the "inserted" hook.
  78.               const insert = ancestor.data.hook.insert
  79.               if (insert.merged) {
  80.                 // start at index 1 to avoid re-invoking component mounted hook
  81.                 for (let i = 1; i < insert.fns.length; i++) {
  82.                   insert.fns[i]()
  83.                 }
  84.               }
  85.             } else {
  86.               registerRef(ancestor)
  87.             }
  88.             ancestor = ancestor.parent
  89.           }
  90.         }
  92.         // destroy old node
  93.         if (isDef(parentElm)) {
  94.           removeVnodes([oldVnode], 0, 0)
  95.         } else if (isDef(oldVnode.tag)) {
  96.           invokeDestroyHook(oldVnode)
  97.         }
  98.       }
  99.     }
  101.     invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  102.     return vnode.elm
  103.   }

由于我们传入的 oldVnode 实际上是一个 DOM container，所以 isRealElement 为 true，接下来又通过 emptyNodeAt 方法把 oldVnode 转换成 VNode 对象，然后再调用 createElm 方法。

  1.   function createElm (
  2.     vnode,
  3.     insertedVnodeQueue,
  4.     parentElm,
  5.     refElm,
  6.     nested,
  7.     ownerArray,
  8.     index
  9.   ) {
  10.     if (isDef(vnode.elm) && isDef(ownerArray)) {
  11.       // This vnode was used in a previous render!
  12.       // now it's used as a new node, overwriting its elm would cause
  13.       // potential patch errors down the road when it's used as an insertion
  14.       // reference node. Instead, we clone the node on-demand before creating
  15.       // associated DOM element for it.
  16.       vnode = ownerArray[index] = cloneVNode(vnode)
  17.     }
  19.     vnode.isRootInsert = !nested // for transition enter check
  20.     if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
  21.       return
  22.     }
  24.     const data = vnode.data
  25.     const children = vnode.children
  26.     const tag = vnode.tag
  27.     if (isDef(tag)) {
  28.       if (process.env.NODE_ENV !== 'production') {
  29.         if (data && data.pre) {
  30.           creatingElmInVPre++
  31.         }
  32.         if (isUnknownElement(vnode, creatingElmInVPre)) {
  33.           warn(
  34.             'Unknown custom element: <' + tag + '> - did you ' +
  35.             'register the component correctly? For recursive components, ' +
  36.             'make sure to provide the "name" option.',
  37.             vnode.context
  38.           )
  39.         }
  40.       }
  42.       vnode.elm = vnode.ns
  43.         ? nodeOps.createElementNS(vnode.ns, tag)
  44.         : nodeOps.createElement(tag, vnode)
  45.       setScope(vnode)
  47.       /* istanbul ignore if */
  48.       if (__WEEX__) {
  49.         // in Weex, the default insertion order is parent-first.
  50.         // List items can be optimized to use children-first insertion
  51.         // with append="tree".
  52.         const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
  53.         if (!appendAsTree) {
  54.           if (isDef(data)) {
  55.             invokeCreateHooks(vnode, insertedVnodeQueue)
  56.           }
  57.           insert(parentElm, vnode.elm, refElm)
  58.         }
  59.         createChildren(vnode, children, insertedVnodeQueue)
  60.         if (appendAsTree) {
  61.           if (isDef(data)) {
  62.             invokeCreateHooks(vnode, insertedVnodeQueue)
  63.           }
  64.           insert(parentElm, vnode.elm, refElm)
  65.         }
  66.       } else {
  67.         createChildren(vnode, children, insertedVnodeQueue)
  68.         if (isDef(data)) {
  69.           invokeCreateHooks(vnode, insertedVnodeQueue)
  70.         }
  71.         insert(parentElm, vnode.elm, refElm)
  72.       }
  74.       if (process.env.NODE_ENV !== 'production' && data && data.pre) {
  75.         creatingElmInVPre--
  76.       }
  77.     } else if (isTrue(vnode.isComment)) {
  78.       vnode.elm = nodeOps.createComment(vnode.text)
  79.       insert(parentElm, vnode.elm, refElm)
  80.     } else {
  81.       vnode.elm = nodeOps.createTextNode(vnode.text)
  82.       insert(parentElm, vnode.elm, refElm)
  83.     }
  84.   }

createElm 的作用是通过虚拟节点创建真实的 DOM 并插入到它的父节点中。createComponent 方法目的是尝试创建子组件，接下来判断 vnode 是否包含 tag，如果包含，先简单对 tag 的合法性在非生产环境下做校验，看是否是一个合法标签；然后再去调用平台 DOM 的操作去创建一个占位符元素。

  1.   vnode.elm = vnode.ns
  2.     ? nodeOps.createElementNS(vnode.ns, tag)
  3.     : nodeOps.createElement(tag, vnode)

接下来是通过 createChildren 创建子元素：

  1. function createChildren (vnode, children, insertedVnodeQueue) {
  2.     if (Array.isArray(children)) {
  3.       if (process.env.NODE_ENV !== 'production') {
  4.         checkDuplicateKeys(children)
  5.       }
  6.       for (let i = 0; i < children.length; ++i) {
  7.         createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
  8.       }
  9.     } else if (isPrimitive(vnode.text)) {
  10.       nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
  11.     }
  12.   }

createChildren 的逻辑很简单，实际上是遍历子虚拟节点，递归调用 createElm，这是一种常用的深度优先的遍历算法，这里要注意的一点是在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入。

最后调用 insert 方法把 DOM 插入到父节点中，因为是递归调用，子元素会优先调用 insert，所以整个 vnode 树节点的插入顺序是先子后父。来看一下 insert 方法，它的定义在 src/core/vdom/patch.js 上。

  1. insert(parentElm, vnode.elm, refElm)
  3. function insert (parent, elm, ref) {
  4.   if (isDef(parent)) {
  5.     if (isDef(ref)) {
  6.       if (ref.parentNode === parent) {
  7.         nodeOps.insertBefore(parent, elm, ref)
  8.       }
  9.     } else {
  10.       nodeOps.appendChild(parent, elm)
  11.     }
  12.   }
  13. }

insert 逻辑很简单，调用一些 nodeOps 把子节点插入到父节点中，这些辅助方法定义在 src/platforms/web/runtime/node-ops.js 中：

  1. export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  2.   parentNode.insertBefore(newNode, referenceNode)
  3. }
  5. export function appendChild (node: Node, child: Node) {
  6.   node.appendChild(child)
  7. }

其实就是调用原生 DOM 的 API 进行 DOM 操作。

在 createElm 过程中，如果 vnode 节点不包含 tag，则它有可能是一个注释或者纯文本节点，可以直接插入到父元素中。在我们这个例子中，最内层就是一个文本 vnode，它的 text 值取的就是之前的 this.message 的值 Hello Vue!。

再回到 patch 方法，首次渲染我们调用了 createElm 方法，这里传入的 parentElm 是 oldVnode.elm 的父元素，在我们的例子是 id 为 #app div 的父元素，也就是 Body；实际上整个过程就是递归创建了一个完整的 DOM 树并插入到 Body 上。

最后，我们根据之前递归 createElm 生成的 vnode 插入顺序队列，执行相关的 insert 钩子函数。

总结

这里只是分析了最简单的场景，在实际的项目中，会比这些复杂的很多。

Vue源码分析(二) : Vue实例挂载的更多相关文章

  1. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  2. 手牵手，从零学习Vue源码 系列二（变化侦测篇）

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...

  3. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  4. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  5. Vue源码分析(一) : new Vue() 做了什么

    Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...

  6. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  7. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  8. Fresco 源码分析(二) Fresco客户端与服务端交互(1) 解决遗留的Q1问题

    4.2 Fresco客户端与服务端的交互(一) 解决Q1问题 从这篇博客开始,我们开始讨论客户端与服务端是如何交互的,这个交互的入口,我们从Q1问题入手(博客按照这样的问题入手,是因为当时我也是从这里 ...

  9. 框架-springmvc源码分析(二)

    框架-springmvc源码分析(二) 参考: http://www.cnblogs.com/leftthen/p/5207787.html http://www.cnblogs.com/leftth ...

随机推荐

  1. 改变说明文档显示位置wrap

    装饰器会改变文档的显示位置 例子1:使用wrap前,输出内函数中的说明文档 def check(fun): """检查权限的装饰器""" d ...

  2. SQL SERVER-Login搬迁脚本

    USE master GO IF OBJECT_ID ('sp_hexadecimal') IS NOT NULL DROP PROCEDURE sp_hexadecimal GO CREATE PR ...

  3. CentOS7下编译安装Python3.7.x【亲测有效】

    所有操作都在root用户下操作 下载安装包 编译安装 建立软链接 验证 安装: 更新yum: yum update 安装Python依赖: yum install openssl-devel bzip ...

  4. 某个Spring Cloud分布式架构

  5. iptables详解（6）：iptables扩展模块之 state 扩展

    为了防止恶意攻击主动连接到你的主机 我们需要通过iptables的扩展模块判断报文是为了回应我们之前发出的报文还是主动向我们发送的报文 state模块可以让iptables实现 连接追踪机制 NEW表 ...

  6. Go语言中Goroutine的设置

    一. 通过runtime包进行多核设置 1.NumCPU()获取当前系统的cpu核数 2.GOMAXPROCS设置当前程序运行时占用的cpu核数 版本1.6之前默认是使用1个核,而之后是全部使用. 好 ...

  7. 运输层7——TCP的流量控制和拥塞控制

    目录 1. TCP的流量控制 2. TCP的拥塞控制 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户数据报协议UDP 运输层3--传输控 ...

  8. 链表(python)

    链表1.为什么需要链表顺序表的构建需要预先知道数据大小来申请连续的存储空间,而在进行扩充时又需要进行数据的搬迁,所以使用起来并不是很灵活.链表结构可以充分利用计算机内存空间,实现灵活的内存动态管理. ...

  9. mybatis3.0-[topic10-14] -全局配置文件_plugins插件简介/ typeHandlers_类型处理器简介 /enviroments_运行环境 /多数据库支持/mappers_sql映射注册

    mybatis3.0-全局配置文件_   下面为中文官网解释 全局配置文件的标签需要按如下定义的顺序: <!ELEMENT configuration (properties?, setting ...

  10. Run Code Once on First Load (Concurrency Safe)

    原文: https://golangcode.com/run-code-once-with-sync/ ------------------------------------------------ ...