一、生命週期圖示
vue在生命週期中有這些狀態，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed
二、示例講解Vue 的生命週期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vuejs生命週期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('創建vue實例前', this);
},
created: function() {
showData('創建vue實例後', this);
},
beforeMount: function() {
showData('掛載到dom前', this);
},
mounted: function() {
showData('掛載到dom後', this);
},
beforeUpdate: function() {
showData('數據變化更新前', this);
},
updated: function() {
showData('數據變化更新後', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue實例銷燬前', this);
},
destroyed: function() {
showData('vue實例銷燬後', this);
}
});
function realDom() {
console.log('真實dom結構：' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 數據：' + obj.message)
console.log('掛載的對象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
// vm.message = "good...";
// vm.$destroy();
</script>
</html>
代碼運行，然後打開瀏覽器，並進入它的 Console 面板：
vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鉤子的內容：
（1）beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象
（2）created ：數據已經綁定到了對象實例，但是還沒有掛載對象
首先會判斷對象是否有 el 選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味着停止了生命週期
（3）beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的
可以看到此時是給vue實例對象添加$el成員，並且替換掉掛載的DOM元素。因爲在之前console中打印的結果可以看到 beforeMount 之前 el 上還是 undefined。
（4）el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點
（5） mounted:將el的內容掛載到了el，相當於我們在jquery執行了(el).html(el)生成頁面上真正的dom，上面我們就會發現dom的元素和我們el的元素是一致的。在此之後，我們能夠用方法來獲取到el元素下的dom對象，並進 行各種操作
在 mounted之前h1中還是通過{{message}}進行佔位的，因爲此時還有掛載到頁面上，還是 JavaScript 中的虛擬DOM形式存在的。在mounted之後可以看到 dom 結構中的內容發生了變化。
（6）當我們的data發生改變時，會調用 beforeUpdate 和 updated 方
beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還
沒有發生改變
updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到
dom上面，完成更新
（7） beforeDestroy,destroed :實例的銷燬，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動
調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被毀。
也就是銷燬的是創建的 vue 對象，並不會將頁面內容銷燬
通過生命週期的各個階段，可以利用不同階段的特性，實現一些功能
比如案例：待補充。。。