圖片中文字過小，請用放大鏡查看
vue實例
![]()
vue生命週期函數
| 函數名稱 |
階段 |
說明 |
| beforeCreate |
創建階段：創建之前 |
在beforeCreate執行的時候 data和methods中的數據尚未被初始化 |
| created |
創建階段：創建 |
在created執行的時候 data和methods已經被初始化好了。如果要調用methods中的方法，或者操作data中的數據 最早只能在created中操作 |
| beforeMount |
創建階段：掛載之前 |
beforeMount執行的時候 模板已經在內存中編譯好了但是尚未掛載到頁面中去 此時頁面還是舊的 |
| mounted |
創建階段：掛載 |
mounted時實例創建期間最後一個生命週期函數，當執行完mounted就表示，實例已經被完全創建好了，此時，如果沒有其他草錯的話，這個實例就靜靜的躺在內存中，一動不動 |
| beforeUpdate |
運行階段：數據更新之前 |
當執行beforUpdate的時候 頁面中顯示的數據還是舊的 此時data中的數據是最新的 此時頁面尚未和最新的數據同步 |
| updated |
運行階段：數據更新之後 |
當update執行的時候 頁面和data中的數據已經同步，都是最新的數據 |
| beforeDestroy |
銷燬階段：銷燬之前 |
當執行beforeDestroy的時候，vue實例身上的數據尚未被銷燬 |
| destroyed |
銷燬階段：銷燬之後 |
當執行destroyed的視乎，vue實例身上的數據被完全銷燬 |
測試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='no'">
<h3 id="h3">{{msg}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'ok'
},
methods : {
show () {
console.log('執行了show方法！！')
}
},
beforeCreate () { //第一個生命週期函數 表示實例被完全創建出來之前會執行它
//console.log(this.msg) //返回undefined 找不到msg 表示 data沒有被加載
//console.log(this.show()) //找不到此方法 表示methods 尚未加載
// 結論： 在beforeCreate執行的時候 data和methods中的數據尚未被初始化
},
created () { // 第二個生命週期函數
//console.log(this.msg);//返回ok 表示可以data中的數據已經被加載
//this.show(); //返回 執行了show方法！！ 表示methods中的數據已經被加載
// 結論： 在created執行的時候 data和methods已經被初始化好了
//如果要調用methods中的方法，或者操作data中的數據 最早只能在created中操作
},
beforeMount (){ // 第三個生命週期行數 表示模板已經在內存中完成了 但是並沒有渲染到真正的頁面中去
//console.log(document.getElementById('h3').innerText);//返回{{msg}} 表示尚未渲染到頁面上去
//beforeMount執行的時候 模板已經在內存中編譯好了但是尚未掛載到頁面中去 此時頁面還是舊的
},
mounted () { //第四個生命週期函數 表示內存中的模板，已經真是的掛載到了頁面中 用戶已經可以看到渲染好的頁面了
//console.log(document.getElementById('h3').innerText); 返回ok 表示可以得到頁面中的內容
//結論： mounted時實例創建期間最後一個生命週期函數，當執行完mounted就表示，實例已經被完全創建好了，此時，如果沒有其他草錯的話，這個實例就靜靜的躺在內存中，一動不動
},
//運行中的兩個事件
beforeUpdate () { //表示頁面中的數據還沒有被更行 數據被更新了
//console.log("頁面中的數據是："+document.getElementById('h3').innerText); 返回ok
//console.log("data中msg的數據是："+this.msg); 返回no
//結論： 當執行beforUpdate的時候 頁面中顯示的數據還是舊的 此時data中的數據是最新的 此時頁面尚未和最新的數據同步
},
updated (){ //表示頁面中的數據和data中的數據保持同步
//console.log("頁面中的數據是："+document.getElementById('h3').innerText); 返回no
//console.log("data中msg的數據是："+this.msg); 返回no
//結論：當update執行的時候 頁面和data中的數據已經同步，都是最新的數據
}
})
</script>
</body>
</html>
