vue 源码理解分解之 _init

_init 是 Vue 构造函数中第一个执行，也是唯一一个执行的方法，它主要实行了以下功能
初始化:
vm._uid

属性	作用
_uid++	每次执行 _init 时自增，用于记录 vue 实例数
_isVue = true	vue 实例标记
$options【options._isComponent 为真】	执行 initInternalComponent（）初始化内部组件
$options【options._isComponent 为假】	说明该 vue 实例并非作为组件，则会 mergeOptions（resolveConstructorOptions(vm.constructor),options,vm）执行选项合并，resol… 会对当前 vm 的构造函数的默认选项进行查找，最终生成合适的选项作为源于传入的 options 进行合并
_renderProxy = initProxy(vm) || vm	当前实例的代理(区分 dev 和 pro 环境)
_self = vm	当前 vm 实例

_init 执行的一些初始化方法

方法	作用
initLifecycle(vm)	初始化生命周期相关属性
initEvents(vm)	初始化事件相关属性
initRender(vm)	同上类似
callHook(vm, ‘beforeCreate’)	触发狗子
initInjections(vm)	同上类似
initState(vm)	同上类似
initProvide(vm)	同上类似
callHook(vm, ‘created’)	触发狗子
vm.$mount(vm.$options.el)	挂载元素

initLifecycle(vm) 初始化生命周期的属性

vm.$parent = "会通过options.parent查找第一个非抽象组件作为父节点";
vm.$root = parent.$root || vm;
vm.$children = [];
vm.$refs = {};
// 全局watcher
vm._watcher = null;
// 当前vm 失效状态
vm._inactive = null;
// 当前vm 直接失效状态 || 组件指令 inactive 状态 ？？
vm._directInactive = false;
// 生命周期状态
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;

initEvents(vm) 初始化事件相关属性

初始化事件相关属性，如果options中存在 _parentListeners（通过 v-on="{event:handler}" 传入）

vm._events = Object.create(null)
vm._hasHookEvent = false
const listeners = vm.$options._parentListeners
// 创建函数连接，将处理方法放置_event (通过 add,remove 操作)
if (listeners) {
  updateComponentListeners(vm, listeners)
}

initRender(vm) 初始化渲染相关属性和方法

初始化虚拟根节点，静态根节点，$vnode( 父节点 )，将子节点作为插槽更新至$slots

vm._vnode = null // the root of the child tree
vm._staticTrees = null // v-once cached trees
const options = vm.$options
 // the placeholder node in parent tree
const parentVnode = vm.$vnode = options._parentVnode
const renderContext = parentVnode && parentVnode.context
// 将子节点以 kv 的形式作为插槽
vm.$slots = resolveSlots(options._renderChildren, renderContext)
vm.$scopedSlots = emptyObject

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)
// $attrs && $listeners
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)

initInjections(vm) 初始化注入的属性

向父级查找 inject[key].from ,对注入的数据 defineReactive

const result = resolveInject(vm.$options.inject, vm);
toggleObserving(false)
defineReactive(vm, key, result[key])
toggleObserving(true)

initInjections(vm) 初始化注入的属性

向父级查找 inject[key].from ,对注入的数据 defineReactive

const result = resolveInject(vm.$options.inject, vm);
toggleObserving(false)
defineReactive(vm, key, result[key])
toggleObserving(true)

initState(vm) 初始化状态

向父级查找 inject[key].from ,对注入的数据 defineReactive

vm._watchers = [];
const opts = vm.$options;
// 校验propsData 与 props 是否匹配，并对生成的vm._props = {}进行  defineReactive
if (opts.props) initProps(vm, opts.props)
// 挂载至 vm
if (opts.methods) initMethods(vm, opts.methods)
// 初始化 vm._data
if (opts.data) {
  initData(vm)
} else {
  observe(vm._data = {}, true /* asRootData */)
}
// 初始化 vm._computedWatchers ， 每个computed 对应一个 lazy watcher ， getter 作为 expOrFn
if (opts.computed) initComputed(vm, opts.computed)
// 创建多个 Watcher , options.watch.key 作为 cb
if (opts.watch && opts.watch !== nativeWatch) {
  initWatch(vm, opts.watch)
}

initProvide(vm) 初始化依赖属性

提供依赖

vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide