初始化
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
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) initData(vm)} else observe(vm._data = {}, true)
if (opts.computed) initComputed(vm, opts.computed)
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)