Vue.js 實例生命周期（原圖出自于Vue.js 官網），如圖2-2 所示。
init: 在實例開始初始化時同步調用。此時數據觀測、事件等都尚未初始化。2.0 中更名
為beforeCreate。
created ：在實例創建之后調用。此時已完成數據綁定、事件方法，但尚未開始DOM 編
譯，即未掛載到document 中。
beforeCompile: 在DOM 編譯前調用。2.0 廢棄了該方法，推薦使用created。
beforeMount: 2.0 新增的生命周期鉤子，在mounted 之前運行。
compiled: 在編譯結束時調用。此時所有指令已生效，數據變化已能觸發DOM 更新，但
不保證el 第一次插入文檔之后調用。2.0 廢棄了該方法，推薦使用mounted。這
個變化其實已經改變了ready這個生命周期狀態，相當于取消了在el 插入DOM 時調用，ready 會在第一次attached 后調用。操作
appendTo()），直接操作vm.
el 從DOM 刪除時調用，而且必須是指令或
實例方法。2.0 中同樣廢棄了該方法。
beforeDestroy: 在開始銷毀實例時調用，此刻實例仍然有效。
destroyed: 在實例被銷毀之后調用。此時所有綁定和實例指令都已經解綁，子實例也被銷毀。
beforeUpdate: 2.0 新增的生命周期鉤子，在實例掛載之后，再次更新實例（例如更新
data）時會調用該方法，此時尚未更新DOM 結構。
updated:2.0 新增的生命周期鉤子，在實例掛載之后，再次更新實例并更新完DOM 結構
后調用。
activated ：2.0 新增的生命周期鉤子，需要配合動態組件keep-live 屬性使用。在動態
組件初始化渲染的過程中調用該方法。
deactivated ：2.0 新增的生命周期鉤子，需要配合動態組件keep-live 屬性使用。在動
態組件移出的過程中調用該方法。
var vm = new Vue({
el : '#app',
init: function() {
console.log('init');
},
created: function() {
console.log('created');
},
beforeCompile: function() {
console.log('beforeCompile');
},
compiled: function() {
console.log('compiled');
},
attached: function() {
console.log('attached');
},
dettached: function() {
console.log('dettached');
},
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('destroyed');
},
ready: function() {
console.log('ready');
// 組件完成后調用destroy();
}
});
