vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期圖示中英文版Vue實例生命周期鉤子
知乎上近日有人發起了一個 “react 是不是比 vue 牛皮，為什么？” 的問題，Vue.js 作者尤雨溪12月4日正面回應了該問題。以下是尤雨溪回復的一部分：
作為一個個人項目的 Vue 沒有這樣的宣傳資源，也并不是為了改變用戶。所以從設計的角度上來說，Vue 首先考慮的是假設用戶只掌握了 web 基礎知識 (HTML, CSS, JS) 的情況下，如何能夠最快理解和上手，實現一個看得見摸得著的應用。
--------------
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
比如 created 鉤子可以用來在一個實例被創建之后執行代碼：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的鉤子，在實例生命周期的不同階段被調用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調用它的 Vue 實例。
不要在選項屬性或回調上使用箭頭函數，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。
生命周期圖示（中英文版）
下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。
vue生命周期英文版
<!DOCTYPE html> <html> <head><title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <body><div id="app"><p>{{ message }}</p> </div><script type="text/javascript">var app = new Vue({el: '#app',data: {message : "xuxiao is boy" },beforeCreate: function () {console.group('beforeCreate 創建前狀態===============》');console.log("%c%s", "color:red" , "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) },created: function () {console.group('created 創建完畢狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeMount: function () {console.group('beforeMount 掛載前狀態===============》');console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },mounted: function () {console.group('mounted 掛載結束狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //已被初始化console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeUpdate: function () {console.group('beforeUpdate 更新前狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },updated: function () {console.group('updated 更新完成狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },beforeDestroy: function () {console.group('beforeDestroy 銷毀前狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },destroyed: function () {console.group('destroyed 銷毀完成狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message)}}) </script> </body> </html>create 和 mounted 相關
在chrome瀏覽器里打開，F12看console就能發現beforecreated：el 和 data 并未初始化?
created:完成了 data 數據的初始化，el沒有
beforeMount：完成了 el 和 data 初始化?
mounted?：完成掛載
el還是 {{message}}，這里就是應用的?Virtual DOM（虛擬Dom）技術，先把坑占住了。到后面mounted掛載的時候再把值渲染進去。
update 相關
在 chrome console里執行以下命令
app.message=?'yes?!! I?do';就能看到data里的值被修改后，將會觸發update的操作。
destroy 相關
有關于銷毀，暫時還不是很清楚。我們在console里執行下命令對 vue實例進行銷毀。銷毀完成后，我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這么理解，執行了destroy操作，后續就不再受vue控制了。
app.$destroy();beforecreate?: 舉個栗子：可以在這加個loading事件?
created?：在這結束loading，還做一些初始化，實現函數自執行?
mounted?： 在這發起后端請求，拿回數據，配合路由鉤子做一些事情
beforeDestroy： 你確認刪除XX嗎？ destroyed ：當前組件已被刪除，清空相關內容
轉載于:https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html
總結
以上是生活随笔為你收集整理的vue生命周期图示中英文版Vue实例生命周期钩子的全部內容，希望文章能夠幫你解決所遇到的問題。
