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); //undefined
console.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); //undefined
console.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 ：當前組件已被刪除，清空相關內容