Vue實例生命周期知識點整理積累

beforeCreate

  • 類型:Function
  • 詳細:
    在實例初始化之后,數(shù)據(jù)觀測(data observer)和event/watcher事件配置之前被調(diào)用。

created

  • 類型: Function
  • 詳細:
    在實例創(chuàng)建完成后被立即調(diào)用。在這一步,實例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運算,watch/event時間回調(diào)。然而,掛載階段還沒開始,$el屬性目前不可見。

beforeMount

  • 類型: Function
  • 詳細:
    在掛載開始之前被調(diào)用:相關(guān)的render函數(shù)首次內(nèi)被調(diào)用
    該鉤子在服務(wù)器端渲染期間不被調(diào)用。

mounted

  • 類型:Function
  • 詳情:
    el被新創(chuàng)建的vm.$el替換,并掛載到實例上去之后調(diào)用該鉤子。如果root實例掛載了一個文檔內(nèi)元素,當(dāng)mounted被調(diào)用時vm.$el也在文檔內(nèi)。
    注意mounted不會承諾所有的子組件也都一起被掛載。如果需要等到整個視圖都渲染完畢,可以用vm.$nextTick替換掉mounted
mounted: function () {
    this.$nextTick(function () {
        //code that will run only after the
        //entire view has been rendered
    })
}

該鉤子在服務(wù)器端渲染期間不被調(diào)用

beforeUpdate

  • 類型:Function
  • 詳情:
    數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬DOM重新渲染和打補丁之前。
    你可以在這個鉤子中進一步地更改狀態(tài),這個不會觸發(fā)附加的重渲染過程。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用

updated

  • 類型:Function
  • 詳細:
    由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁,在這之后會調(diào)用該鉤子。
    當(dāng)這個鉤子被調(diào)用時,組件DOM已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài)。如果要想贏狀態(tài)改變。如果要相應(yīng)狀態(tài)改變,通常最好使用**計算屬性****watcher**取而代之。
    注意updated不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢,可以用**vm.$nextTick**替換掉updated:
updated: function () {
    this.$nextTick(function () {
        //code that will run only after the
        //entire view has been re-rendered
    })
}   

該鉤子在服務(wù)器渲染期間不被調(diào)用。

updated

  • 類型:Function
  • 詳細:
    由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁,在這之后會調(diào)用該鉤子。
    當(dāng)這個鉤子被調(diào)用時,組件DOM已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài)。如果要想贏狀態(tài)改變。如果要相應(yīng)狀態(tài)改變,通常最好使用**計算屬性****watcher**取而代之。
    注意updated不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢,可以用**vm.$nextTick**替換掉updated:
updated: function () {
    this.$nextTick(function () {
        //code that will run only after the
        //entire view has been re-rendered
    })
}   
**該鉤子在服務(wù)器渲染期間不被調(diào)用。**

activated

  • 類型:Function
  • 詳細:
    keep-alive組件激活時調(diào)用
    該鉤子在服務(wù)器端渲染期間不被調(diào)用。

deactivated

  • 類型:Function
  • 詳細:
    keep-alive組件停用時調(diào)用。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestory

  • 類型:Function
  • 詳細:
    實例銷毀之前調(diào)用。在這一步,實例仍然完全可用。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用。

destroyed

  • 類型:Function
  • 詳細:
    Vue實例銷毀后調(diào)用。調(diào)用后,Vue實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,176評論 0 29
  • Vue 框架的入口就是 Vue 實例,其實就是框架中的 view model ,它包含頁面中的業(yè)務(wù) 處理邏輯、數(shù)據(jù)...
    云中一樵夫閱讀 1,162評論 0 1
  • 我是在鬧鐘下午兩點叫囂時起了床,待會兩點半要去新街上做家教。除去路上十分鐘,這就意味著我要在二十分鐘內(nèi)完成上衛(wèi)生間...
    千乾淺倩閱讀 713評論 9 14
  • 今天畫了一幅廚房小物:瓷小罐。別看它平時普普通通,其實畫出來,很可愛呢。 先描出個大致的線稿,用象牙黑鋪色,明確一...
    云間信閱讀 291評論 4 3
  • 特別說明前兩天分享的刪除僵尸粉的神器,有網(wǎng)友反映掃碼以后,會存在閃退的情況,無法正常使用。經(jīng)過與網(wǎng)友討論分析,可能...
    野鹿志閱讀 632評論 0 1

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