Vue 實例的生命周期可以分為創建階段、掛載階段、更新階段和銷毀階段。下面是每個階段具體干了什么的說明和對應的代碼示例:
創建階段
- beforeCreate:
- 此階段在實例初始化之后,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
- 主要用于在實例初始化之后,但是在實例準備好之前執行一些邏輯。
new Vue({beforeCreate: function () {console.log('Before create hook');}
});
- created:
- 在實例創建完成后被立即調用。
- 在這一步,實例已經完成了 data 的觀測和屬性方法的運算,但是掛載階段還沒開始。
new Vue({created: function () {console.log('Created hook');}
});
掛載階段
- beforeMount:
- 在掛載開始之前被調用。
- 相關的render函數首次被調用。
new Vue({beforeMount: function () {console.log('Before mount hook');}
});
- mounted:
- 在實例被掛載到DOM后調用。
- 如果根實例掛載到了一個文檔內的元素上,當 mounted 被調用時 vm.$el 也在文檔內。
new Vue({mounted: function () {console.log('Mounted hook');}
});
更新階段
- beforeUpdate:
- 數據更新時調用,發生在虛擬 DOM 重新渲染和打補丁之前。
- 可以在該鉤子中進一步地更改狀態,不會觸發附加的重渲染過程。
new Vue({beforeUpdate: function () {console.log('Before update hook');}
});
- updated:
- 由于數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會調用該鉤子。
new Vue({updated: function () {console.log('Updated hook');}
});
銷毀階段
- beforeDestroy:
- 在實例銷毀之前調用。實例仍然完全可用。
new Vue({beforeDestroy: function () {console.log('Before destroy hook');}
});
- destroyed:
- 在實例銷毀后調用。此時,實例的所有指令都已解綁,所有的事件監聽器已移除,所有的子實例也已被銷毀。
new Vue({destroyed: function () {console.log('Destroyed hook');}
});
以上是Vue實例生命周期各個階段的具體說明和對應的代碼示例,希望對你有所幫助。