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

130 阅读1分钟

初始化

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}
      • 判断组件并挂载 extendsmixins
      • 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)