vue源碼學習-new Vue時發生了什麼

前言

Vue框架包含了各類各樣的特性，爲了更好的理解框架自己，讓咱們來看看在vue初始化時所作的一些操做

// 合併選項，參數處理
if (options && options._isComponent) {
  // 優化內部組件的實例化，而且內部組件的動態合併較慢，且沒有須要特殊處理的部分。
  initInternalComponent(vm, options)
} else {
  // 合併選項
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
}
複製代碼

// 暴露出真正的this指向
vm._self = vm
// 初始化生命週期
initLifecycle(vm)
// 初始化事件監聽
initEvents(vm)
// 渲染頁面
initRender(vm)
// 進入beforeCreate生命週期
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
// 初始化狀態
initState(vm)
initProvide(vm) // resolve provide after data/props
// 進入created生命週期
callHook(vm, 'created')

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}
複製代碼

如下按順序介紹調用方法的具體做用：

initLifecycle

主要是進行一些變量的初始化

initEvents

初始化事件監聽

initRender

主要是初始化組件的scopedSlots屬性，以及listeners屬性

callHook(vm, 'beforeCreate')

不用說也知道，這是調用beforeCreate生命週期方法

initInjections

vue2.2.0新增的特性，初始化做爲HOC高階組件使用的api，包含一個provide和inject屬性，父級組件經過provide注入一個object，子組件無論多少層級，均可以經過inject來獲取父組件注入的值。 initInjectctions就是初始化inject屬性的

initState

初始化data、props、methods、computed、watch等屬性

initProvide

從方法名能夠看出，是用來初始化provide這個HOC組件屬性的

callHook(vm, 'created')

調用created生命週期方法

vm.options.el)

當new Vue的時候傳入了el屬性（即vue模板掛載的dom節點）時，調用$mount方法,初始化dom節點。

博客地址 gitbook小冊