new Vue() 做了什么？

new Vue() 做了什么？

src\core\instance\index.js

...
function Vue (options) {
  ...
  this._init(options)
}
...

export default Vue

简单明了：执行了this._init(options)操作

那 _init 函数又做了啥？？

src\core\instance\init.js

Vue.prototype._init = function (options?: Object) {
  ...
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')

  ...
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

显然，做了这三件事：

• 执行了一堆初始化操作 initLifecycle、initEvents、initRender、initInjections、initState、initProvide
• 调用了俩生命周期钩子
• 执行 vm.$mount(vm.$options.el)

这里，我们看主流程 $mount 操作，$mount 基于不同的平台(web/weex)和构建方式有不同的实现，主要看 web 端编译版本实现

src\platforms\web\entry-runtime-with-compiler.js

// 缓存原型上定义的 $mount 函数
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    // 申明并处理 template
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      // 关键操作：利用 compileToFunctions 编译生成 render 函数
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  // 利用原型上定义的 $mount 函数实现挂载
  return mount.call(this, el, hydrating)
}

src\platforms\web\runtime\index.js

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

src\core\instance\lifecycle.js

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  ...
  // 调用 beforeMount 钩子
  callHook(vm, 'beforeMount')

  // 申明并赋值 updateComponent 函数
  let updateComponent
  updateComponent = () => {
      ...
      const vnode = vm._render() // 调用 _render() 生成 vnode
      vm._update(vnode, hydrating) // 调用 _update() 更新 DOM
      ...
  }

  // 初始化一个 render watcher
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

  ...
  // 调用 mounted 钩子
  callHook(vm, 'mounted')
  return vm
}

$mount 的核心即 mountComponent 函数，该函数做了以下几件事：

• 调用了 beforeMount、mounted钩子
• 申明并赋值updateComponent函数
• 初始化了一个 render watcher ，传入 updateComponent作为 update 执行函数

src\core\observer\watcher.js

export default class Watcher {
  ...
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    ...
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } 
    this.value = this.lazy
      ? undefined
      : this.get()
  }

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  get () {
    ...
    value = this.getter.call(vm, vm)
    ...
  }
}

在 watcher 初始化的过程中，会直接调用一次 updateComponent函数

那么继续回到 updateComponent中来

const vnode = vm._render()
vm._update(vnode, hydrating)

updateComponent 做了两件事：

• 调用 vm._render() 生成 vnode
• 调用 vm._update() 更新 DOM

下面来看一下这俩函数的具体实现

src\core\instance\render.js

export function initRender (vm: Component) {
  ...
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  ...
}

Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    let vnode
    ...
    vnode = render.call(vm._renderProxy, vm.$createElement)
    ...
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }

可以看出，_render 函数主要就是调用前面 $mount 中编译好的 render 函数，传入参数vm.$createElement，返回一个虚拟DOM vnode，而 $createElement是在initRender时定义好的一个函数(a, b, c, d) => createElement(vm, a, b, c, d, true)

src\core\vdom\create-element.js

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array {
  ...
  return _createElement(context, tag, data, children, normalizationType)
}

export function _createElement (
  context: Component,
  tag?: string | Class | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array {
  // 将当前实例的子节点数组处理成 vnode 数组
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // 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)) {
    ...
    return vnode
  } else {
    return createEmptyVNode()
  }
}

总而言之，vm.$createElement就是执行_createElement函数返回了一个 vnode，且父 vnode 的 children 也是 vnode 数组，形成了对应描述 DOM tree 的 vnode tree

src\core\instance\lifecycle.js

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    ...
    if (!prevVnode) {
        // initial render 初始化渲染调用
        vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
        // updates update渲染调用
        vm.$el = vm.__patch__(prevVnode, vnode)
    }
    ...
}

vm._update()中的操作就很少了，根据是初始化还是 update 场景传入不同的参数去调用vm.__patch__

src\platforms\web\runtime\index.js

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

src\platforms\web\runtime\patch.js

import { createPatchFunction } from 'core/vdom/patch'
export const patch: Function = createPatchFunction({ nodeOps, modules })

src\core\vdom\patch.js

export function createPatchFunction (backend) {
    ...
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    ...
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
}

createPatchFunction 函数返回了一个 patch 函数，在 patch 中调用 nodeOps 中定义的方法操作元素的 create、insert 和 remove，实现 vnode 到 real DOM 的转化

src\platforms\web\runtime\node-ops.js

总结

一张图

vue实例化过程.png