国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Cristalven / 3259人閱讀

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

上篇文章,我們講了vm._renderProxy相關的內容。主要是通過Proxy為我們vm屬性添加一些自定義的行為。今天我們回到init方法中,為大家講解initLifecycle。
initLifeCycle方法用來初始化一些生命周期相關的屬性,以及為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文檔中找到了答案。

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

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

當前vm實例有父實例parent,則賦值給parent變量。如果父實例存在,且該實例不是抽象組件。則執行下面代碼

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

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

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

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94967.html

相關文章

  • 人人都能懂的Vue源碼系列—02—Vue構造函數

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

    X_AirDu 評論0 收藏0
  • 人人都能懂的Vue源碼系列—01—Vue源碼目錄結構

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

    MAX_zuo 評論0 收藏0
  • 人人都能懂的Vue源碼系列—04—resolveConstructorOptions函數-下

    摘要:上一篇文章中說道,函數要分兩種情況進行說明,第一種是為基礎構造器的情況,這個已經向大家介紹過了,今天這篇文章主要介紹第二種情況,是創建的子類。表示的是當前構造器上新增的,表示的是當前構造器上新增的封裝。 上一篇文章中說道,resolveConstructorOptions函數要分兩種情況進行說明,第一種是Ctor為基礎構造器的情況,這個已經向大家介紹過了,今天這篇文章主要介紹第二種情況...

    My_Oh_My 評論0 收藏0
  • 人人都能懂的Vue源碼系列—04—resolveConstructorOptions函數-下

    摘要:上一篇文章中說道,函數要分兩種情況進行說明,第一種是為基礎構造器的情況,這個已經向大家介紹過了,今天這篇文章主要介紹第二種情況,是創建的子類。表示的是當前構造器上新增的,表示的是當前構造器上新增的封裝。 上一篇文章中說道,resolveConstructorOptions函數要分兩種情況進行說明,第一種是Ctor為基礎構造器的情況,這個已經向大家介紹過了,今天這篇文章主要介紹第二種情況...

    BlackHole1 評論0 收藏0
  • 人人都能懂的Vue源碼系列—07—initProxy

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

    vspiders 評論0 收藏0

發表評論

0條評論

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