成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

人人都能懂的Vue源碼系列—08—initLifecycle

Cristalven / 3267人閱讀

摘要：主要是通過為我們屬性添加一些自定義的行為。方法用來初始化一些生命周期相關(guān)的屬性，以及為等屬性賦值，來看源碼。名稱說明指定已創(chuàng)建的實例之父實例，在兩者之間建立父子關(guān)系。一個對象，持有已注冊過的所有子組件。

上篇文章，我們講了vm._renderProxy相關(guān)的內(nèi)容。主要是通過Proxy為我們vm屬性添加一些自定義的行為。今天我們回到init方法中，為大家講解initLifecycle。
initLifeCycle方法用來初始化一些生命周期相關(guān)的屬性，以及為parent,child等屬性賦值，來看源碼。

export function initLifecycle (vm: Component) {
  const options = vm.$options
  // locate first non-abstract parent
  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

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

一行一行分析

const options = vm.$options

把mergeOptions后的options賦值給options變量。

// locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

我們注意到，vue作者對這段代碼提供了一行注釋

locate first non-abstract parent

定位第一個"非抽象"的父組件，注意非抽象這三個字。什么是非抽象呢？最初自己也很疑惑，最后在vue文檔中找到了答案。

抽象組件的定義如上圖所示，注意這句話，不會出現(xiàn)在父組件鏈中。明白了這點我們再去看上面的代碼就不會有那么迷糊了。

let parent = options.parent
if (parent && !options.abstract) {
    ... 
}

當(dāng)前vm實例有父實例parent，則賦值給parent變量。如果父實例存在，且該實例不是抽象組件。則執(zhí)行下面代碼

while (parent.$options.abstract && parent.$parent) {
  parent = parent.$parent
}
parent.$children.push(vm)

注意while循環(huán)內(nèi)的條件parent.$options.abstract && parent.$parent,如果父實例parent是抽象組件，則繼續(xù)找parent上的parent。直到找到非抽象組件為止。之后把當(dāng)前vm實例push到定位的第一個非抽象parent的$children屬性上。這樣我們就說完了怎么找vm的parent屬性。
之后我們回到initLifecycle繼續(xù)往下看

  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

這些代碼都是為vm一些屬性賦值。這些屬性的作用如下表。

名稱 說明
$parent 指定已創(chuàng)建的實例之父實例，在兩者之間建立父子關(guān)系。子實例可以用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數(shù)組中。
$root 當(dāng)前組件樹的根 Vue 實例。如果當(dāng)前實例沒有父實例，此實例將會是其自己。
$children 當(dāng)前實例的直接子組件。需要注意 $children 并不保證順序，也不是響應(yīng)式的。
$refs 一個對象，持有已注冊過 ref 的所有子組件。
_watcher 組件實例相應(yīng)的 watcher 實例對象。
_inactive 表示keep-alive中組件狀態(tài)，如被激活，該值為false,反之為true。
_directInactive 也是表示keep-alive中組件狀態(tài)的屬性。
_isMounted 當(dāng)前實例是否完成掛載(對應(yīng)生命周期圖示中的mounted)。
_isDestroyed 當(dāng)前實例是否已經(jīng)被銷毀(對應(yīng)生命周期圖示中的destroyed)。
_isBeingDestroyed 當(dāng)前實例是否正在被銷毀,還沒有銷毀完成(介于生命周期圖示中deforeDestroy和destroyed之間)。

initLifecycle方法的邏輯比較簡單，主要對vue實例一些屬性進行賦值。所以這里就不畫流程圖來進行說明了。下篇文章我們主要講initEvents方法，敬請期待。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94967.html

相關(guān)文章

  • 人人都能懂的Vue源碼系列—02—Vue構(gòu)造函數(shù)

    摘要：果然我們找到了的構(gòu)造函數(shù)定義。告訴你是一個構(gòu)造函數(shù)，需要用操作符去調(diào)用。在深入方法之前，我們先把目光移到文件里在的構(gòu)造函數(shù)定義之后，有一系列方法會被立即調(diào)用。下篇博文主要介紹相關(guān)的內(nèi)容，涉及到原型鏈和構(gòu)造函數(shù)以及部分的實現(xiàn)，敬請期待 上篇博文中說到了Vue源碼的目錄結(jié)構(gòu)是什么樣的，每個目錄的作用我們應(yīng)該也有所了解。我們知道core/instance目錄主要是用來實例化Vue對象，所以我...

    X_AirDu 評論0 收藏0

  • 人人都能懂的Vue源碼系列—01—Vue源碼目錄結(jié)構(gòu)

    摘要：閱讀的源碼，或者說閱讀一個框架的源碼，了解它的目錄結(jié)構(gòu)都是很有幫助的。人人都能懂的源碼系列文章將會詳細的介紹源碼的方方面面。 閱讀Vue的源碼，或者說閱讀一個框架的源碼，了解它的目錄結(jié)構(gòu)都是很有幫助的。下面我們來看看Vue源碼的目錄結(jié)構(gòu)。showImg(https://segmentfault.com/img/bV8fLS?w=598&h=654); Vue各目錄簡介 下圖是Vue各個...

    MAX_zuo 評論0 收藏0

  • 人人都能懂的Vue源碼系列—04—resolveConstructorOptions函數(shù)-下

    摘要：上一篇文章中說道，函數(shù)要分兩種情況進行說明，第一種是為基礎(chǔ)構(gòu)造器的情況，這個已經(jīng)向大家介紹過了，今天這篇文章主要介紹第二種情況，是創(chuàng)建的子類。表示的是當(dāng)前構(gòu)造器上新增的，表示的是當(dāng)前構(gòu)造器上新增的封裝。 上一篇文章中說道，resolveConstructorOptions函數(shù)要分兩種情況進行說明，第一種是Ctor為基礎(chǔ)構(gòu)造器的情況，這個已經(jīng)向大家介紹過了，今天這篇文章主要介紹第二種情況...

    My_Oh_My 評論0 收藏0

  • 人人都能懂的Vue源碼系列—04—resolveConstructorOptions函數(shù)-下

    摘要：上一篇文章中說道，函數(shù)要分兩種情況進行說明，第一種是為基礎(chǔ)構(gòu)造器的情況，這個已經(jīng)向大家介紹過了，今天這篇文章主要介紹第二種情況，是創(chuàng)建的子類。表示的是當(dāng)前構(gòu)造器上新增的，表示的是當(dāng)前構(gòu)造器上新增的封裝。 上一篇文章中說道，resolveConstructorOptions函數(shù)要分兩種情況進行說明，第一種是Ctor為基礎(chǔ)構(gòu)造器的情況，這個已經(jīng)向大家介紹過了，今天這篇文章主要介紹第二種情況...

    BlackHole1 評論0 收藏0

  • 人人都能懂的Vue源碼系列—07—initProxy

    摘要：不同的代碼運行環(huán)境賦值的結(jié)果不同。當(dāng)訪問的屬性不是類型或者屬性值在被代理的對象上不存在，則拋出錯誤提示，否則就返回該屬性值。該方法可以在開發(fā)者錯誤的調(diào)用屬性時，提供提示作用。只不過目前規(guī)范還沒有很完善，使用的時候要稍加注意。 前幾篇文章中，我們主要講了merge options的一些操作。今天我們回到init方法往下講。 if (process.env.NODE_ENV !== pro...

    vspiders 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<