vue初始化都做什麼 - tw511教學網

做的事：1、選項合併，處理元件的設定內容；2、初始化vue範例生命週期相關的屬性；3、初始化自定義元件事件的監聽；4、初始化render渲染所需的slots、渲染函數等；5、呼叫beforeCreate函數；6、初始化注入資料；7、對props、data、watch等進行初始化；8、把祖輩傳下的資料注入後初始化provide；9、呼叫created函數；10、掛載DOM元素。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

建立範例

檔案 src/instance/index.js 為建立Vue範例的入口檔案

在建立之前首先會有一些混入的方法，用於初始化範例的方法和屬性

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
這裡先看initMixin就行

initMixin(Vue) 初始化混入

initMixin方法的作用是混入Vue的_init方法，_init方法裡的核心又是以下方法

合併options設定
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

0. 合併options設定

  vm.$options = mergeOptions(  // 合併options
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
登入後複製

合併options並在範例上掛載一個$options屬性。合併什麼東西了？這裡是分兩種情況的：

初始化new Vue
在執行new Vue建構函式時，引數就是一個物件，也就是使用者的自定義設定；會將它和vue之前定義的原型方法，全域性API屬性；還有全域性的Vue.mixin內的引數，將這些都合併成為一個新的options，最後賦值給一個的新的屬性$options。
子元件初始化
如果是子元件初始化，除了合併以上那些外，還會將父元件的引數進行合併，如有父元件定義在子元件上的event、props等等。

經過合併之後就可以通過this.$options.data存取到使用者定義的data函數，this.$options.name存取到使用者定義的元件名稱，這個合併後的屬性很重要，會被經常使用到。

1. initLifecycle(vm)

主要作用是確認元件的父子關係和初始化某些範例屬性。

export function initLifecycle(vm: Component) {
  const options = vm.$options  // 之前合併的屬性
  
  let parent = options.parent;
  if (parent && !options.abstract) { //  找到第一個非抽象父元件
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }
  
  vm.$parent = parent  // 找到後賦值
  vm.$root = parent ? parent.$root : vm  // 讓每一個子元件的$root屬性都是根元件
  
  vm.$children = []
  vm.$refs = {}
  
  vm._watcher = null
  ...
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}
登入後複製

2. initEvents(vm)

初始化自定義元件事件的監聽,若存在父監聽事件,則新增到該範例上。主要作用是將父元件在使用v-on或@註冊的自定義事件新增到子元件的事件中心中。

export function initEvents (vm: Component) {
  vm._events = Object.create(null)  // 事件中心
  vm._hasHookEvent = false
  // init parent attached events
  const listeners = vm.$options._parentListeners // 經過合併options得到的
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}
登入後複製

3. initRender(vm)

初始化render渲染所需的slots、渲染函數等。其實就兩件事。 1、插槽的處理、 2、$createElm 也就是 render 函數中的 h 的宣告

export function initRender(vm) {
  vm._vnode = null
  ...
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)  //轉化編譯器的
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)  // 轉化手寫的
  ...
}
登入後複製

4. callHook(vm, 'beforeCreate')

呼叫 beforeCreate勾點函數。現在這裡只需要知道它會執行使用者自定義的生命週期方法，如果有mixin混入的也一併執行。

相關面試題：請問可以在beforeCreate勾點內通過this存取到data中定義的變數麼，為什麼以及請問這個勾點可以做什麼？

> 回答：是不可以存取的，因為在vue初始化階段，這個時候data中的變數還沒有被掛載到this上，這個時候存取值會是undefined。beforeCreate這個勾點在平時業務開發中用的比較少，而像外掛內部的instanll方法通過Vue.use方法安裝時一般會選在beforeCreate這個勾點內執行，vue-router和vuex就是這麼幹的。

5. initInjections(vm)

後面的初始化順序是inject => state => provide 初始化inject在props/data之前,這樣做的目的是可以在props/data中使用inject內所注入的內容

export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)  // 刻意為之不被響應式
    Object.keys(result).forEach(key => {
      ...
      defineReactive(vm, key, result[key])
    })
    toggleObserving(true)
  }
}
登入後複製

resolveInject的主要作用就是自下而上的一層一層的找當前被注入的資料

export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {
    // inject is :any because flow is not smart enough to figure out cached
    // 首先定義一個result返回找到的結果。
    const result = Object.create(null)
    const keys = hasSymbol
      ? Reflect.ownKeys(inject)
      : Object.keys(inject)
    // 接下來使用雙迴圈查詢，外層的for迴圈會遍歷inject的每一項
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      // #6574 in case the inject object is observed...
      if (key === '__ob__') continue
      const provideKey = inject[key].from
      let source = vm
      //然後再內層使用while迴圈自底向上的查詢inject該項的父級是否有提供對應的依賴。
      while (source) {
        if (source._provided && hasOwn(source._provided, provideKey)) {
          result[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
      if (!source) {
        if ('default' in inject[key]) {
          const provideDefault = inject[key].default
          result[key] = typeof provideDefault === 'function'
            ? provideDefault.call(vm)
            : provideDefault
        } else if (process.env.NODE_ENV !== 'production') {
          warn(`Injection "${key}" not found`, vm)
        }
      }
    }
    return result
  }
}
登入後複製

6. initState(vm)

初始化會被使用到的狀態，狀態包括props，methods，data，computed，watch五個選項。（這裡先看props，methods，data）

export function initState (vm: Component) {
  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 /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
登入後複製

6.1 initProps

主要作用是檢測子元件接受的值是否符合規則，以及讓對應的值可以用this直接存取

function initProps(vm: Component, propsOptions: Object) {  // 第二個引數為驗證規則
  const propsData = vm.$options.propsData || {}  // props具體的值 父元件傳過來的
  const props = vm._props = {}  // 存放props  元件內可以通過這個存取到傳過來的props
  const isRoot = !vm.$parent // 是否是根節點
  if (!isRoot) {   // 不是根節點則關閉響應式
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    const value = validateProp(key, propsOptions, propsData, vm)
    defineReactive(props, key, value)
    if (!(key in vm)) {
      proxy(vm, `_props`, key)  // 代理 this.xx實際上存取的是 this._props.xx
    }
  }
  toggleObserving(true)
}
登入後複製

6.2 initMethods

主要作用是將methods內的方法掛載到this下。

function initMethods (vm: Component, methods: Object) {
  const props = vm.$options.props
  for (const key in methods) {
    if(methods[key] == null) {  // methods[key] === null || methods[key] === undefined 的簡寫
      warn(`只定義了key而沒有相應的value`)
    }
    if(props && hasOwn(props, key)) {
      warn(`方法名和props的key重名了`)
    }
    if((key in vm) && isReserved(key)) {
      warn(`方法名已經存在而且以_或$開頭`)
    }
    vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)   //  相當於methods[key].bind(vm)
  }
}
登入後複製

6.3 initData

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (methods && hasOwn(methods, key)) {
       warn(`和methods內的方法重名了`)
    }
    if (props && hasOwn(props, key)) {
      warn(`和props內的key重名了`)
    } else if (!isReserved(key)) {  // key不能以_或$開頭
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
登入後複製

initProvide(vm)

很容易看出是把使用者傳進來的provide選項先獲取到，如果是方法則執行一下再掛載到範例的_provided屬性,不是則直接掛載到_provided屬性

export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}
登入後複製

7.callHook(vm, 'created')

呼叫 created勾點函數

總結：Vue初始化都做了什麼？

1、選項合併，處理元件的設定內容，將傳入的options與建構函式本身的options進行合併(使用者選項和系統預設的選項進行合併)

2、初始化vue範例生命週期相關的屬性，定義了比如：root、root、root、parent、children、children、children、refs

3、初始化自定義元件事件的監聽,若存在父監聽事件,則新增到該範例上

4、初始化render渲染所需的slots、渲染函數等。其實就兩件事：插槽的處理和 $createElm的宣告，也就是 render 函數中的 h 的宣告

5、呼叫 beforeCreate 勾點函數，在這裡就能看出一個元件在建立前和後分別做了哪些初始化

6、初始化注入資料，隔代傳參時先inject。作為一個元件，在要給後輩元件提供資料之前，需要先把祖輩傳下來的資料注入進來

7、對props,methods,data,computed,watch進行初始化，包括響應式的處理

8、在把祖輩傳下來的資料注入進來以後再初始化provide

9、呼叫 created 勾點函數，初始化完成，可以執行掛載了

10、掛載到對應DOM元素上。如果元件建構函式設定了el選項，會自動掛載，所以就不用再手動呼叫$mount去掛載

【相關推薦：、】

以上就是vue初始化都做什麼的詳細內容，更多請關注TW511.COM其它相關文章！