vue 生命周期詳解

1,了解生命周期

為方便了解,實例初始值如圖:


實例如圖

create:創(chuàng)建


create代碼


瀏覽器控制臺打印

如果可以看到創(chuàng)建 created 的方法里,實例對象data 值都加載完成,但是Dom節(jié)點并未加載完,所以如果初始獲取接口賦值給data的情況下,建議在這個函數(shù)里處理。

mount:掛載


mounte代碼


瀏覽器控制臺打印

如果是Dom元素進行調(diào)用,建議放到 mounted 函數(shù)的 $nextTick 里

update:更新


update代碼


初始瀏覽器控制臺打印
value變量修改之后會觸發(fā)

value變量更新渲染頁面之后觸發(fā)

destroy:銷毀

destroy代碼


瀏覽器控制臺打印

關(guān)閉頁面,離開當前路由情況下執(zhí)行,如果頁面有定時器,建議在次進行銷毀定時器,否則離開路由情況并未關(guān)閉頁面的情況下,定時器依舊執(zhí)行,浪費進程。

2,父組件生命周期順序如下:

父組件生命周期代碼如下:


父組件代碼

table-data 子組件生命周期如下:


子組件代碼

瀏覽器打印順序如下:


瀏覽器控制臺打印順序

有次可見,生命周期順序為:

父組件 created --> 子組件 created --> 子組件 mounted --> 父組件 mounted

會發(fā)現(xiàn)調(diào)用順序不是父組件都調(diào)用完成之后再調(diào)用子組件,父組件向子組件傳值時,如果值返回是異步情況下,有時會導致子組件并未接收到值立馬渲染到頁面上,此時建議用 watch、computed?來監(jiān)聽值變化。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • react和vue都是比較熱門的前端框架,對于一些初始數(shù)據(jù)的加載,應該放在那個生命周期中調(diào)用比較合適?給出結(jié)論前,...
    lemonzoey閱讀 3,871評論 0 0
  • 什么是Vue的生命周期 先看一看官方文檔對Vue生命周期的說明: 每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始...
    salt_fash閱讀 529評論 1 3
  • 每個vue實例從創(chuàng)建到銷毀的過程都是一個生命周期,也會運行對應的鉤子函數(shù),下圖為Vue生命周期示意圖: 1.bef...
    Starkchen閱讀 1,497評論 0 0
  • 每個vue實例從創(chuàng)建到銷毀的過程都是一個生命周期,也會運行對應的鉤子函數(shù),下圖為Vue生命周期示意圖: 1.bef...
    yun_154192閱讀 12,777評論 1 7
  • 生命周期的定義 生命周期:就是一個組件從實例化創(chuàng)建并添加到DOM開始,一直到組件被銷毀的整個過程。 生命周期函數(shù)(...
    聽書先生閱讀 1,295評論 0 4

友情鏈接更多精彩內(nèi)容