Vue生命周期示例詳解
更新時間：2017年04月12日 10:36:03 作者：淺白
這篇文章主要為大家詳細介紹了Vue生命周期的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
首先看看Vue文檔里關于實例生命周期的解釋圖
那么下面我們來進行測試一下
<section id="app-8">
{{data}}
</section>
var myVue=new Vue({
el:"#app-8",
data:{
data:"aaaaa",
info:"nono"
},
beforeCreate:function(){
console.log("創(chuàng)建前========")
console.log(this.data)
console.log(this.$el)
},
created:function(){
console.log("已創(chuàng)建========")
console.log(this.info)
console.log(this.$el)
},
beforeMount:function(){
console.log("mount之前========")
console.log(this.info)
console.log(this.$el)
},
mounted:function(){
console.log("mounted========")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){
console.log("更新前========");
},
updated:function(){
console.log("更新完成========");
},
beforeDestroy:function(){
console.log("銷毀前========")
console.log(this.info)
console.log(this.$el)
},
destroyed:function(){
console.log("已銷毀========")
console.log(this.info)
console.log(this.$el)
}
})
代碼如上，瀏覽器開始加載文件
由上圖可知：
1、beforeCreate 此時$el、data 的值都為undefined
2、創(chuàng)建之后，此時可以拿到data的值，但是$el依舊為undefined
3、mount之前，$el的值為“虛擬”的元素節(jié)點
4、mount之后，mounted之前，“虛擬”的dom節(jié)點被真實的dom節(jié)點替換，并將其插入到dom樹中，于是在觸發(fā)mounted時，可以獲取到$el為真實的dom元素()
myVue.$el===document.getElementById("app-8") // true
接著，在console中修改data，更新視圖
觸發(fā)beforeUpdata 和updated
接著，執(zhí)行myVue.$destroy()
總結一下，對官方文檔的那張圖簡化一下，就得到了這張圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了在基于vue-cli的項目自定義打包環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue綁定class和綁定內(nèi)聯(lián)樣式的實現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇vue 根據(jù)選擇條件顯示指定參數(shù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10
Axios是一個基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下2023-07-07
在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決
這篇文章主要介紹了在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue 中獲取當前時間并實時刷新,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
vue中語音播報,目前本人寫的過程中,遇到了兩種情況,第一種是后端直接返回一個mp3的播放url,第二種就是播報的內(nèi)容需要前端自己拼接的,關于兩種方法,我都說一下如何實現(xiàn),感興趣的朋友一起看看吧2024-07-07
vue如何導出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07