Vue生命周期示例詳解
更新時間：2017年04月12日 10:36:03 作者：淺白
這篇文章主要為大家詳細介紹了Vue生命周期的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
首先看看Vue文檔里關(guān)于實例生命周期的解釋圖
那么下面我們來進行測試一下
<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()
總結(jié)一下，對官方文檔的那張圖簡化一下，就得到了這張圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue form表單動態(tài)添加組件實戰(zhàn)案例
這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue router/Element重復點擊導航路由報錯問題及解決
這篇文章主要介紹了Vue router/Element重復點擊導航路由報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
element-plus 如何設(shè)置 el-date-picker 彈出框位置
el-date-picker 組件會自動根據(jù)空間范圍進行選擇比較好的彈出位置,但特定情況下,它自動計算出的彈出位置并不符合我們的實際需求,故需要我們手動設(shè)置,這篇文章主要介紹了element-plus 如何設(shè)置 el-date-picker 彈出框位置,需要的朋友可以參考下2024-07-07
雙端Diff在可以解決更多簡單Diff算法處理不了的場景，且比簡單Diff算法性能更好。本文將通過示例為大家詳細講講雙端diff算法的實現(xiàn)與使用，需要的可以參考一下2022-09-09
keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節(jié)省性能，由于是一個抽象組件，所以在頁面渲染完畢后不會被渲染成一個DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue項目環(huán)境搭建總結(jié)篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了ejsExcel模板在Vue.js項目中的實際運用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08