生命週期鉤子=生命週期函數=生命週期事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/bootstrap3.3.7.css">
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "ok"
},
methods: {
show() {
console.log('執行了show方法');
},
beforeCreate() { //這是我們遇到的第一個生命週期函數,表明實例完全被創建出來之前,會執行它
console.log(this.msg); //undefined
this.show()
//注意在beforeCreate生命週期函數執行的時候,data和 methods的數據都還沒被初始化
},
created() { //這是第二個生命週期函數
console.log(this.msg)
this.show()
//在created中data和methods都已經被初始化好了
//如果要調用Methods 或者操作data中的數據,最早只能在created操作
},
beforeMount() { //這是遇到的第三個生命週期函數,表示模板已經在內存中編輯完成了但是尚未把模板渲染到頁面中
console.log(document.getElementById('h3').innerText)
//在beforeMount執行的時候,頁面中的元素還沒有被替換過來,只是之前寫的模板字符串
},
mounted() { //這是遇到的第四個生命週期函數,表示內存中的模板已經真實的掛載到了頁面,用戶已經可以看到渲染好的頁面了
console.log(document.getElementById('h3').innerText)
//注意:mounted是實例創建期間的最後一個生命週期函數,當執行完mounted完全創建好了,此時如果沒有其他操作的話這個實例就靜靜的在內存中
},
//接下來是運行中的兩個事件
beforeUpdate() { //這時候,表示我們的界面還沒被更新,數據被更新了}
console.log('界面上元素的內容' + document.getElementById('h3').innerText)
console.log('data上的msg數據時' + this.msg);
//得出結論:當執行這個函數的時候頁面中的顯示的數據還是舊的,此時date數據是最新的,頁面尚未和最新的數據保持同步
},
updated() {
console.log('界面上元素的內容:' + document.getElementById('h3').innerText);
console.log('data中的msg數據:' + this.msg);
//updated事件執行的時候,頁面和data數據已經保持同步了,都是最新的
}
}
})
</script>
</body>
</html>