【Vue2 源码02】Vue实例初始化

初始化

new Vue => Vue .prototype._init()

1. 配置实例（vm）属性

• vm._uid = uid++
• vm._isVue = true // observe方法使用，用来避开vue实例
• vm.$options
  • mergeOptions
    • 区分组件关系 （if (Ctor.super)）
    • normalizeProps
      • -\w => 大写字母，并设置无原型对象缓存
      • 规范格式为 {type: any,...}
    • normalizeInject
      • 规范格式为 {from: string,...}
    • normalizeDirectives
      • 规范格式为{ bind: function, update: function}
    • 判断组件并挂载 extends、mixins
    • options child 覆盖 parent 并返回
• vm._renderProxy = vm
• vm._self = vm

2. initLifecycle(vm) 初始化生命周期标记以及节点关系

• vm.$parent = parent

• vm.$root = parent ? parent.$root : vm

• vm.$children = []

  vm.$refs = {}

• vm._watcher = null

  vm._inactive = null

  vm._directInactive = false

  vm._isMounted = false

  vm._isDestroyed = false

  vm._isBeingDestroyed = false

3. initEvents(vm) 初始化事件标记，更新父级监听器

• vm._events = Object.create(null)

  vm._hasHookEvent = false

• if (listeners = vm.$options._parentListeners) updateComponentListeners(vm, listeners)

4. initRender(vm)

• vm._vnode = null子树根节点

  vm._staticTrees = null静态树

• vm.$vnode = parentVnode = options._parentVnode

• vm.$slots

• vm.$scopedSlots

• vm._c

  vm.$createElement

• 定义html属性响应、监听器响应

  • defineReactive(vm, '$attrs', parentVnode.node && parentData.attrs || emptyObject, null, true)

    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)

5. callHook(vm, 'beforeCreate')

生命周期 beforeCreate

• 调用生命周期hook函数
• 触发生命周期钩子vm.$emit('hook:' + hook)

6. initInjections(vm)

• 递归解析inject

7. initState(vm)

• vm._watchers = []
• const opts = vm.$options

1. if (opts.props) initProps(vm, opts.props)
2. if (opts.methods) initMethods(vm, opts.methods)
3. if (opts.data) initData(vm)} else observe(vm._data = {}, true)
4. if (opts.computed) initComputed(vm, opts.computed)
5. if (opts.watch && opts.watch !== nativeWatch) initWatch(vm, opts.watch)

8. initProvide(vm)

• vm._provided = vm.$options.provide

9. callHook(vm, 'created')

生命周期 created

• 调用生命周期hook函数
• 触发生命周期钩子vm.$emit('hook:' + hook)

10. 自动调用 $mount

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