vue第一個生命週期beforecreate
創建前
- 拿不到任何數據
- 也不能訪問dom
vue的第二個生命週期created
創建完成
- 可以拿到數據
- 編譯中
- dom未掛載，無法獲得真實的頁面
vue的第三個生命週期 beforemount
掛載前
- 可以獲取數據
- 編譯完成
- dom未掛載
vue的第四個生命週期mounted
掛載完成（創建完成了）
- 能拿到數據
- 編譯完成
- 掛載到dom上
- 完成一個真實的頁面渲染
vue的第五個生命週期beforeupdate
修改數據前（組件運行的一個週期）
- data打印出來更新的數據
- dom還是舊的
vue的第六個生命週期updated
修改完成
- 打印出來新的data
- 打印出來新dom掛到真正的頁面中
- 完成model到view的更新
vue的第七個生命週期beforedestory
銷燬前
- 所有data method都可以用
vue的第八個生命週期destoryed
銷燬完成
- 所有data，method等不可再用。
<!DOCTYPE html>
<!--
@title：vue的生命週期
-->
<html>
<head>
<meta charset="utf-8">
<title>vue的生命週期</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 id="message" style="margin-left: 15px;">{{msg}}</h1>
<button class="btn btn-primary" type="button" @click="updateMsg">更新msg</button>
<button class="btn btn-danger" type="button" @click="destroyVM">銷燬實例</button>
</div>
<script type="text/javascript">
var vm = new Vue({ //開始創建一個實例對象
el:"#app", //Vue實例的掛載目標
data:{ //vm對象的屬性
msg:"我愛中國"
},
methods:{ //vm對象的方法
print(){
return "print方法";
},
updateMsg(){
this.msg = "I love China";
},
destroyVM(){
this.$destroy();
}
},
/* 以下開始爲整個vm實例的生命週期 */
beforeCreate(){
console.warn("---------beforeCreate-------------------這是第一個生命週期函數，實例還沒有被完全創建出來，data和methods都不存在，所以打印data是undefined，調用print方法提示找不到，因爲此時實例都還有被創建，模板還未編譯，所以el也是undefined，因爲調用print方法報錯導致js語句停止執行，所以38行的獲取dom的語句不會執行，所以控制檯看不到38行的打印內容");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
},
created(){
console.warn("---------created------------------這是第二個生命週期函數，實例被創建出來，這個時候data和methods都已經被初始化好了，所以data可以被正常地打印出來，print方法可以被正常的調用，這個時候Vue開始在內存中編譯模板，處於編譯中（ing）並未編譯好的一個狀態，所以此時el也是undefined，所以獲取dom打印出來的只是{{msg}}");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
},
beforeMount(){
console.warn("---------beforeMount------------------這是第三個生命週期函數，data和methods正常打印就不多說了，在上面的created生命週期中我們不是說模板處於正在編譯的一個狀態嗎，那麼此時模板已經在內存中編譯完成了，所以打印el會輸出[Object HTMLDivElemet]這樣一個元素，但是此時模板只是在內存中編譯完成還沒有掛載到頁面中，所以獲取dom打印出來的還是{{msg}}");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
},
mounted(){
console.warn("---------mounted------------------這是第四個生命週期函數，此時內存中的已經編譯好的模板已經真實的掛載到了頁面中，一個渲染好的頁面呈現在了我們眼前,此時的打印結果想必大家已經知道原因了。");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
console.group("說明：mounted是實例創建過程中的最後一個生命週期函數，當mounted執行完畢就表示實例已經被完全創建好了，如果沒有其它操作，這個實例會一直保存在內存中，此時創建階段正式結束，進入運行階段，")
console.groupEnd();
},
beforeUpdate(){
console.warn("---------beforeUpdate------------------這是第五個生命週期函數，也是組件運行階段的第一個生命週期函數，點擊更新按鈕時會觸發該方法，這一步先根據data中最新的數據，在內存中重新編譯好一個最新的模板，這個最新的模板在該生命週期中會被編譯好，但不會掛載到真實的頁面中，所以data中打印出來的是更新後的最新的數據，而獲取dom打印出來的還是舊的數據");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
},
updated(){
console.warn("---------updated------------------這是第六個生命週期函數，也是組件運行階段的第二個生命週期函數，此時內存中已經編譯好的最新的模板會掛載到真正的頁面中，這個時候就完成了data(model)層到view(視圖)層的更新，頁面同步刷新，所以獲取dom的時候會打印出最新的數據“I love China”");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
},
beforeDestroy(){
console.warn("---------beforeDestroy------------------這是第七個生命週期函數，當執行該鉤子函數的時候，Vue實例從---運行階段---進入到了---銷燬階段---但是此時實例上的data、methods以及過濾器和指令等都處於可用狀態，該實例還未真正銷燬。");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
},
destroyed(){
console.warn("---------destroyed------------------這是第七個生命週期函數，當執行該鉤子函數的時候，實例完全銷燬，魂飛魄散，自然而然地，實例上的所有數據，方法，指令等等都不再可用。");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("獲取dom:" + document.getElementById('message').innerHTML);
}
})
</script>
</body>
</html>
轉至：https://www.csdn.net/gather_21/MtTaAgysNjEwOS1ibG9n.html