Sega公佈《審判之逝：湮滅的記憶》中文試玩版 9月10日凌晨0點上線
阿新 • • 發佈：2021-09-09
每個Vue物件在建立時都要經過一系列的初始化過程。在這個過程中Vue.js會自動執行一些叫做生命週期的的鉤子函式，我們可以使用這些函式，在vm物件建立的不同階段加上我們需要的程式碼，實現特定的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-2.6.14.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<input type="text" v-model="num">
</div>
<script>
const vm = new Vue({
el:"#app",
data(){
return {
num: 0,
}
},
beforeCreate(){
console.log("--------data資料被賦值到vm物件之前---------");
console.log(this.$data);
console.log(this.$el);
},
created(){ // 重點掌握，最常用，開發中一般會在這裡編寫ajax程式碼，傳送http請求獲取來自服務端的資料
console.log("--------data資料被賦值到vm物件之後---------");
console.log(this.$data);
console.log(this.$el);
},
beforeMount(){
console.log("--------把data資料渲染到HTML模板之前---------");
console.log(this.$el);
console.log(this.$el.innerHTML); // 此時還是原始的HTML模板原始碼
},
mounted(){ // 重點掌握，最常用，開發中一般會在這裡編寫頁面初始化的操作，一般就是根據條件/狀態，進行頁面跳轉，改變頁面的特效。
console.log("--------把data資料渲染到HTML模板之後---------");
console.log(this.$el);
console.log(this.$el.innerHTML);
},
beforeUpdate(){
console.log("--------data資料發生改變以後，同步到HTML模板之前，此時data和模板的資料是不一致的---------");
console.log(this.num);
console.log(this.$el.innerHTML);
},
updated(){
console.log("--------data資料發生改變以後，同步到HTML模板之後，此時data和模板中的資料保持一致---------");
console.log(this.num);
console.log(this.$el.innerHTML);
}
});
</script>
</body>
</html>
總結：
1、created，這個階段就是在 vue物件掛在了data資料以後，把ajax請求後端資料的程式碼放進 created 2、mounted，在vue使用的過程中，如果要初始化操作，把初始化頁面操作的程式碼放在 mounted 中執行。mounted階段就是在vm物件已經把data資料渲染到頁面以後。一般頁面初始化使用。例如，使用者訪問頁面載入成功以後，進行對應的提示框顯示。