Vue2.0源碼思惟導圖-------------Vue 初始化

     上一節看完《Vue源碼思惟導圖-------------Vue 構造函數、原型、靜態屬性和方法》，這節將會以new Vue()爲入口，大致看下 this._init()要作的事情。

      

 1 function Vue (options) {
 2   if (process.env.NODE_ENV !== 'production' &&
 3     !(this instanceof Vue)
 4   ) {
 5     warn('Vue is a constructor and should be called with the `new` keyword')
 6   }
 7   this._init(options)
 8 }
 9 
10 initMixin(Vue)
11 stateMixin(Vue)
12 eventsMixin(Vue)
13 lifecycleMixin(Vue)
14 renderMixin(Vue)
15 
16 export default Vue

下邊解開_init的面紗

 1 export function initMixin (Vue: Class<Component>) {
 2   Vue.prototype._init = function (options?: Object) {
 3     const vm: Component = this
 4     // a uid
 5     vm._uid = uid++
 6 
 7     let startTag, endTag
 8     /* istanbul ignore if */
 9     if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
10       startTag = `vue-perf-start:${vm._uid}`
11       endTag = `vue-perf-end:${vm._uid}`
12       mark(startTag)
13     }
14 
15     // a flag to avoid this being observed
16     vm._isVue = true
17     // merge options
18     if (options && options._isComponent) {
19       // optimize internal component instantiation
20       // since dynamic options merging is pretty slow, and none of the
21       // internal component options needs special treatment.
22       initInternalComponent(vm, options)
23     } else {
24       vm.$options = mergeOptions(
25         resolveConstructorOptions(vm.constructor),
26         options || {},
27         vm
28       )
29     }
30     /* istanbul ignore else */
31     if (process.env.NODE_ENV !== 'production') {
32       initProxy(vm)
33     } else {
34       vm._renderProxy = vm
35     }
36     // expose real self
37     vm._self = vm
38     initLifecycle(vm)
39     initEvents(vm)
40     initRender(vm)
41     callHook(vm, 'beforeCreate')
42     initInjections(vm) // resolve injections before data/props
43     initState(vm)
44     initProvide(vm) // resolve provide after data/props
45     callHook(vm, 'created')
46 
47     /* istanbul ignore if */
48     if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
49       vm._name = formatComponentName(vm, false)
50       mark(endTag)
51       measure(`vue ${vm._name} init`, startTag, endTag)
52     }
53 
54     if (vm.$options.el) {
55       vm.$mount(vm.$options.el)
56     }
57   }
58 }

總結思惟導圖以下：

 

 高清原圖地址：https://github.com/huashuaipeng/vue--/blob/master/Vue_init.png

 

// Vue.prototype._init
vm._uid = uid++     // 每一個Vue實例都擁有一個惟一的 id
vm._isVue = true    // 這個表示用於避免Vue實例對象被觀測(observed)
vm.$options         // 當前 Vue 實例的初始化選項，注意：這是通過 mergeOptions() 後的
vm._renderProxy = vm    // 渲染函數做用域代理
vm._self = vm       // 實例自己

// initLifecycle(vm)    src/core/instance/lifecycle.js **************************************************
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

// initEvents(vm)   src/core/instance/events.js **************************************************
vm._events = Object.create(null)
vm._hasHookEvent = false

// initRender(vm)   src/core/instance/render.js **************************************************
vm._vnode = null // the root of the child tree
vm._staticTrees = null // v-once cached trees

vm.$vnode
vm.$slots
vm.$scopedSlots

vm._c
vm.$createElement

vm.$attrs
vm.$listeners

// initState(vm)   src/core/instance/state.js **************************************************
vm._watchers = []
vm._data

 

 

代碼參考：

https://github.com/vuejs/vue/tree/dev/src/core/instance