組件生命周期
- 1. 組件的生命周期的四個階段
- 2. 生命周期鉤子函式
- 2.1 鉤子函式定義
- 2.2 鉤子函式理解與實體
1. 組件的生命周期的四個階段
組件的生命周期分為四個階段：
- create（創建）
- mount（掛載）
- update（更新）
- destroy（銷毀）
2. 生命周期鉤子函式
2.1 鉤子函式定義
-
先看看官方的解釋：
每個 Vue 實體在被創建時都要經過一系列的初始化程序——例如，需要設定資料監聽、編譯模板、將實體掛載到 DOM 并在資料變化時更新 DOM 等，同時在這個程序中也會運行一些叫做生命周期鉤子的函式，這給了用戶在不同階段添加自己的代碼的機會， -
鉤子函式到底是個啥意思呢？
組件在加載的程序中，加載到某個階段時，自動觸發的函式
2.2 鉤子函式理解與實體
鉤子函式有哪些？怎么用？
結合圖來看~~~
下圖展示了組件的生命周期的程序：（下面會詳細解釋每個）
1. beforeCreate
在實體初始化之后，資料觀測(data observer) 和 event/watcher 事件配置之前被呼叫；如果在beforeCreate函式里面去訪問data資料物件，是訪問不到的
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'123'
},
watch:{
msg:function(){
console.log("我變了");
}
},
beforeCreate(){
console.log("創建組件data物件之前自動觸發~~~");
console.log("beforeCreate",this.msg);
}
})
</script>
</body>
結果：在beforeCreate函式中無法得到msg的值
2. created
- 在執行created函式前，已經有了資料物件data，以及完成了事件的初始化，但$el 屬性目前不可見；
- 在created函式里面可以使用資料，也可以更改資料；
- 呼叫Vue方法，可以獲取原本HTML上的直接加載出來的DOM，但是無法獲取到通過掛載模板生成的DOM（例如：v-for回圈遍歷Vue.list生成li）
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'123'
},
watch:{
msg:function(){
console.log("我變了");
}
},
beforeCreate(){
console.log("創建組件data物件之前自動觸發~~~");
console.log("beforeCreated",this.msg);
},
created:function(){
console.log("創建組件data物件之后自動觸發~~~");
this.msg=100000;
console.log("created",this.msg);
}
})
</script>
結果：在created函式中我們成功的拿到了、更改了msg的值，并且資料被更改后出發了watch屬性中的方法， 而且可以獲取原本HTML上的直接加載出來的DOM（p元素），但是無法獲取到通過掛載模板生成的DOM（例如：v-for回圈遍歷Vue.list生成li元素）
注意：create階段還沒有創建虛擬dom
3.beforeMount
- 在掛載開始之前被呼叫，相關的（渲染函式）模板首次被呼叫，$el屬性可見，但此時在beforeMount函式中依然無法無法獲取到通過掛載模板生成的DOM（例如：v-for回圈遍歷Vue.list生成li元素）
- 在此函式之前都沒有建立虛擬dom
beforeMount:function(){
console.log(this.$el);
console.log("li數量：",document.getElementsByTagName("li").length);
}
結果：
4.mounted
- 執行完beforeMount函式后，$ e l el el被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫該鉤子函式，
- 這里才能獲取初始資料list渲染出來的li
- 掛載后我們已經可以看見網頁內容了，只不過還未操作
mounted:function(){
console.log(this.$el);
console.log("li數量：",document.getElementsByTagName("li").length);
}
結果：同樣的代碼，放在beforeMount 和mounted函式中結果完全不一樣
在update階段，虛擬dom監聽資料變化，隨時更新dom
5. beforeUpdate
當資料發生變化的時候，beforeUpdate這個鉤子函式才會執行
6. updated
虛擬dom重新渲染后執行
7.beforeDestroy
實體銷毀之前呼叫，在這一步，實體仍然完全可用
8.destroyed
Vue 實體銷毀后呼叫，呼叫后，Vue 實體指示的所有東西都會解系結，所有的事件監聽器會被移除，所有的子實體也會被銷毀，
<body>
<div id="app">
<input type="text" v-model="msg">
<ul>
<li v-for="(elem,index) of list" :key="index">{{elem}}</li>
</ul>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h1>數量：{{count}}</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'123',
list:['a','b','c'],
count:0
},
watch:{
msg:function(){
console.log("我變了");
}
},
beforeCreate(){
console.log("創建組件data物件之前自動觸發~~~");
console.log("beforeCreated",this.msg);
},
created:function(){
console.log("創建組件data物件之后自動觸發~~~");
this.msg=100000;
console.log("created",this.msg);
console.log("li數量：",document.getElementsByTagName("li").length);
console.log("p數量：",document.getElementsByTagName("p").length);
},
beforeMount:function(){
console.log(this.$el);
console.log("li數量：",document.getElementsByTagName("li").length);
},
mounted:function(){
console.log(this.$el);
console.log("li數量：",document.getElementsByTagName("li").length);
setInterval(()=>{
this.count++;
},1000)
},
beforeUpdate(){
console.log("更新組件的data變數前自動觸發~~~")
},
updated(){
console.log("更新組件的data變數后自動觸發~~~");
if(this.count>3){
this.$destroy();
}
},
beforeDestroy(){
console.log("銷毀當前組件前自動觸發~~~")
},
destroyed(){
console.log("銷毀組件后自動觸發~~~");
}
})
</script>
</body>
結果：
組件的生命周期就是這樣啦~
本文借鑒了這篇文章
（地址：https://www.sohu.com/a/255415579_100012573）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260611.html
標籤：其他
上一篇：炫彩流光文字 html+css
下一篇：實作紅綠燈的效果