Vue 挂载 — — Vue2.6

Vue挂载.jpg

new Vue(options?) 之后发生了什么？

• 生成vue实例
• 调用原型方法 this._init(options?)

    vm._uid = uid++     // 为当前实例绑定唯一id

    vm._isVue = ture   // 一个避免被观察到的标记（用来过滤无需被数据劫持的标志）

   // 性能测试，记录初始化过程性能
   // config.performance 默认为false
   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }
   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    // 合并配置项
    if (options && options._isComponent) {  // 组件实例配置内部优化
      // 根组件无需，暂时忽略
      // TODO
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

resolveConstructorOptions(Ctor: Class<Component>)

通用方法
解析构造函数配置项
接收参数：组件构造函数
当前暂无需要 TODO

mergeOptions(parent: Object ,child: Object ,vm?: Component)

通用方法
将两个配置项合并为新的配置项

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)  // 检测component是否符合规范
  }

  if (typeof child === 'function') { // 是否为VM
    child = child.options
  }

  normalizeProps(child, vm) // 规范化props 
  normalizeInject(child, vm) // 规范化inject
  normalizeDirectives(child) // 规范化指令 

  if (!child._base) {  // _base === vm
    if (child.extends) { // 合并扩展
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) { // 合并混入
      for (let i = 0, l = child.mixins.length; i < l; i++) {
        parent = mergeOptions(parent, child.mixins[i], vm)
      }
    }
  }

  const options = {}
  let key
  for (key in parent) {  // 合并oldOptions
    mergeField(key)
  }
  for (key in child) { // 合并newOptions
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) { // 合并默认
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

---

if (process.env.NODE_ENV !== 'production') {
    initProxy(vm) // 测试环境兼容模式 proxy
} else {
    vm._renderProxy = vm 
}

    vm._self = vm         // 曝光自身
    initLifecycle(vm)    // 初始化生命周期
    initEvents(vm)   // 初始化事件
    initRender(vm) // 初始化渲染函数
    callHook(vm, 'beforeCreate') // 更新生命周期
    initInjections(vm) // 初始化inject/data
    initState(vm) 初始化状态 （data,method,computed,watch...）
    initProvide(vm) // 初始化provide/data
    callHook(vm, 'created') //更新生命周期

   //性能测试
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
  
//挂载dom
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }