溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Vue組件生命周期實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue組件生命周期實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
組件的生命周期分為四個階段： - create（創建） - mount（掛載） - update（更新） - destroy（銷毀）
先看看官方的解釋： 每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
鉤子函數到底是個啥意思呢？ 組件在加載的過程中，加載到某個階段時，自動觸發的函數
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);
console.log("li數量：",document.getElementsByTagName("li").length);
console.log("p數量：",document.getElementsByTagName("p").length);
}
})
</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 elel 被新創建的 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.destroyedVue 實例銷毀后調用。調用后，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>
<h2>數量：{{count}}</h2>
</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>讀到這里，這篇“Vue組件生命周期實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
