vue 詳解生命週期

2021-10-08 07:39:35 字數 2110 閱讀 4548

new vue、建立vue元件時,執行生命週期;

vue例項化方式:

vue-cli2-runtime-compiler版本:

new

vue(

)//template與el關係:有template就會替換el;

vue-cli2-runtime-only版本(少了js檔案中解析template的**):

new

vue(

)因為vue檔案都被vue-template-compiler解析成物件形式了。

/=只是only版本中vue-template-compiler只作用於vue檔案,

js檔案中的就不處理了,所以不能在這裡使用:template:

vue-cli3版本:

new

vue().

$mount()

/= 虛擬dom掛載

vue生命週期:總結:beforecreate鉤子:初始化內部事件、生命週期後執行;

created鉤子:初始化vue原型,匯入子元件的只是元件檔案的物件形式(不是元件物件),(只載入未解析),例項化自身vue物件完成後執行;

beforemount鉤子:解析模板生成render函式,啟用子元件的建立,父向子傳值(上一步子元件的ast抽象語法樹已經來了)後執行;

(子元件開始執行生命週期,建立並掛載到父元件上);

(如果子元件是通過父元件傳值,父元件是非同步請求獲取值,這個值有沒有到決定子元件是否建立的話,在傳值到之前父元件會按undefined解析這個子元件繼續執行下乙個鉤子,而值傳過去後子元件才開始渲染)

mounted鉤子:結合子元件的虛擬dom和自身vue例項物件、自身render函式,形成最終虛擬dom,並掛載後執行;

beforeupdate鉤子

updated鉤子

beforedestory鉤子

destroyed鉤子

1、建立前後:

beforecreate:建立前鉤子函式;初始化事件(events)和生命週期函式(lifecycle)後執行(要執行週期等鉤子函式要先初始化好);

created:建立後鉤子函式;初始化vue原型(injections),data、methods,給vue建構函式的原型傳好資料用於例項化物件,如果內部有import子元件此時將子元件模板解析成普通物件形式,並匯入,並沒有執行use()將物件傳入vue.extend()模板構造器中,所以還沒開始建立子元件,這一步是例項化完成後執行;所以此處常用於傳送請求,請求初始資料。

2、掛載前後:3、更新前後:

beforeupdate:更新前鉤子函式;當vue例項中data資料發生變化時執行;此時資料是最新的,頁面還沒有更新;

updated:更新後鉤子函式;當改變後的data資料重新渲染到虛擬dom後執行;

4、銷毀前後

beforedestroy:銷毀前鉤子函式;當元件銷毀被觸發時執行(常見於元件切換);

destroyed:銷毀後鉤子函式;拆除檢視方的觀察者(資料與檢視的橋梁、發布訂閱模式的成員)、子元件和事件監聽後執行。

vue生命週期詳解

vue生命週期分為八個階段 建立前後 掛載前後 更新前後 銷毀前後 beforecreate和create鉤子函式間的生命週期 檢測資料,來檢測資料是否變化了,然後初始化事件 create和beforemount鉤子函式間的生命週期 首先判斷有沒有el選項 1.如果沒有的話就暫時停止了生命週期,等待...

vue生命週期詳解

最近在寫業務的時候,總是會遇到一些和vue的生命週期相關的問題,比如 你用ajax請求資料,然後將資料props到子元件的時候,因為ajax是非同步的,然後會發生沒有資料。然後查詢原因還是自己對這個東西理解不夠深入。什麼是生命週期函式?比如 mounted function 或者 mounted 複...

vue生命週期詳解

beforecreate 第乙個生命週期函式,表示例項完全被建立出來之前,會執行它 注意 在 beforecreate 生命週期函式執行的時候,data 和 methods 中的 屬性與方法定義都還沒有沒初始化 created 第二個生命週期函式,在 created 中,data 和 methods...