Vue生命周期從創(chuàng)建到銷毀的過程是什么

這篇文章主要介紹“Vue生命周期從創(chuàng)建到銷毀的過程是什么”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue生命周期從創(chuàng)建到銷毀的過程是什么”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司主營淶源網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App制作,淶源h5微信小程序搭建,淶源網(wǎng)站營銷推廣歡迎淶源等地區(qū)企業(yè)咨詢

Vue的生命周期一直以來都是重中之重，雖然在實際開發(fā)中經(jīng)常用到的就幾個，但是你對生命周期的掌握程度決定著你寫的程序好不好，并且這一塊也一直是面試Vue部分的重要考點。

初識new Vue

關(guān)于new Vue 大家應(yīng)該都知道，new關(guān)鍵字在js中是實例化一個對象。那么 new Vue 都干了啥？

其實，new Vue就是創(chuàng)建了一個Vue實例,Vue實例上是一個類,new Vue實際上是執(zhí)行了Vue類的構(gòu)造函數(shù)

創(chuàng)建Vue實例：

let vm = new Vue({
   el: "#app",
   data: {
       name: 'beiyu'
   },
}

那么關(guān)于這個實例，從它初始化到銷毀，都經(jīng)歷了什么呢？下面一起來看看：

Vue實例從創(chuàng)建到銷毀

實例從創(chuàng)建到銷毀的過程我們稱作生命周期

生命周期的基本概念：

每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程。

例如：需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM并在數(shù)據(jù)變化時更新DOM等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了使用者在不同階段添加自己代碼的機會。

1.創(chuàng)建之前—beforeCreate()

Vue實例對象創(chuàng)建之前
el屬性和data屬性均為空,常用于初始化非響應(yīng)式變量

beforeCreate() {
    console.group("---創(chuàng)建前beforeCreate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data)
},

2.創(chuàng)建之后—created()

Vue實例對象創(chuàng)建之后
data屬性存在,el屬性為空,ref屬性內(nèi)容為空數(shù)組，常用于進行axios請求，頁面的初始化等。但是這里不要請求過多，否則會出現(xiàn)長時間的白屏現(xiàn)象。

created() {
    console.group("---創(chuàng)建之后created---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

3.實例對象和文檔掛載之前—beforeMount()

Vue實例對象和文檔掛載之前，會去找對應(yīng)的template

beforeMount() {
    // 這個時候$el屬性是綁定之前的值
    console.group("---掛載之前beforeMount---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

4.實例對象和文檔掛載之后—mounted()

Vue實例對象和文檔節(jié)點掛載之后
el屬性存在,ref屬性可以訪問

mounted() {
    console.group("---掛載之后mounted---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

5.視圖更新前—beforeUpdate()

View視圖更新之前
響應(yīng)式數(shù)據(jù)更新時調(diào)用

beforeUpdate() {
    console.group("---更新之前beforeUpdate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

6.視圖更新后—updated()

View視圖更新之后
DOM更新完畢，不要在這里操作數(shù)據(jù)，可能陷入死循環(huán)

updated() {
    console.group("---更新之后updated---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

7.實例銷毀之前—beforeDestroy()

Vue實例對象銷毀之前|此時el和data全都還在，一般會在這一步進行銷毀定時器、解綁全局事件、銷毀插件對象等操作。

beforeDestroy() {
    console.group("---銷毀之前beforeDestroy---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

8.實例銷毀之后—destroyed()

Vue實例對象銷毀之后|

destroyed() {
    console.group("---銷毀之后destroyed---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

總結(jié)

vue2生命周期就是以上8個過程，在頁面中我們來看一看,上面的打印結(jié)果：

從頁面打開到完成一共經(jīng)過四個生命周期，因為這里頁面沒有其他操作，所以剩下的四個生命周期沒有對應(yīng)的顯示出來

關(guān)于“Vue生命周期從創(chuàng)建到銷毀的過程是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

網(wǎng)站題目：Vue生命周期從創(chuàng)建到銷毀的過程是什么
網(wǎng)站地址：http://muchs.cn/article24/jpejje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、域名注冊、定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)