- 每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
- 注意生命週期鉤子的 this 上下文指向調用它的 Vue 實例。不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())，因爲箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例，經常導致Uncaught TypeError:Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。
- 10個生命週期鉤子如下：(1) beforeCreate：在實例初始化之後，數據觀測和event/watcher時間配置之前被調用。
(2) created：實例已經創建完成之後被調用。在這一步，實例已經完成以下的配置：數據觀測，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。
(3) beforeMount：在掛載開始之前被調用：相關的render函數首次被調用。該鉤子在服務器端渲染期間不被調用。
(4) mounted：el被新創建的vm.$el替換，並掛在到實例上去之後調用該鉤子函數。該鉤子在服務端渲染期間不被調用。如果root實例掛載了一個文檔內元素，當mounted被調用時vm.$el也在文檔內。
注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
(5) beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁之前。這裏適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。
該鉤子在服務器端渲染期間不被調用，因爲只有初次渲染會在服務端進行。
(6) updated：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
注意 updated 不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以用 vm.$nextTick 替換掉 updated：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
(7) activated：keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。
(8) deactivated：keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。
(9) beforeDestroy：實例銷燬之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染期間不被調用。
(10) destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。<body><h1>構造器生命週期</h1><hr><div id="app"><p>{{message}}</p><p><button @click="add">+</button></p></div><script>var app = new Vue({el: "#app",data: {message: 1},methods: {add: function () {this.message++;}},beforeCreate: function () {console.log("1--beforeCreate 初始化之後");},created: function () {console.log("2--created 創建完成");},beforeMount: function () {console.log("3--beforeMount 掛載之前");},mounted: function () {console.log("4--mounted 被創建");},beforeUpdate: function () {console.log("5--beforeUpdate 數據更新前");},updated: function () {console.log("6--updated 數據更新後");},activated: function () {console.log("7--activated");},deactivated: function () {console.log("8--deactivated");},beforeDestroy: function () {console.log("9--beforeDestroy 被銷燬之前");},destroyed: function () {console.log("10--destroyed 被銷燬之後");}});</script></body>
Vue學習—生命週期
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章