Vue生命周期從創建到銷毀的過程是什么

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

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

初識new Vue

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

其實，new Vue就是創建了一個Vue實例,Vue實例上是一個類,new Vue實際上是執行了Vue類的構造函數

創建Vue實例：

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

那么關于這個實例，從它初始化到銷毀，都經歷了什么呢？下面一起來看看：

Vue實例從創建到銷毀

實例從創建到銷毀的過程我們稱作生命周期

生命周期的基本概念：

每個Vue實例在被創建時都要經過一系列的初始化過程。

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

1.創建之前—beforeCreate()

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

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

2.創建之后—created()

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

created() {
    console.group("---創建之后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實例對象和文檔掛載之前，會去找對應的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實例對象和文檔節點掛載之后
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視圖更新之前
響應式數據更新時調用

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

6.視圖更新后—updated()

View視圖更新之后
DOM更新完畢，不要在這里操作數據，可能陷入死循環

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)},

總結

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

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

關于“Vue生命周期從創建到銷毀的過程是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。