這篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於vue實例的生命週期從創建到銷毀的全過程，生命週期是每個Vue實例在被創作時都要經過一系列的初始化過程，下面一起來看看，希望對大家有幫助。
【相關推薦：javascript影片教學、vue.js教學】
Vue的生命週期一直以來都是重中之重，雖然在實際開發中經常用到的就幾個，但是你對生命週期的掌握程度決定著你寫的程序好不好，並且這一塊也一直是面試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實例在被建立時都要經過一系列的初始化過程。
例如：需要設定資料監聽、編譯範本、將實例掛載到DOM並在資料變更時更新DOM等。同時在這個過程中也會執行一些叫做生命週期鉤子的函數，這給了使用者在不同階段加入自己程式碼的機會。
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)
},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)
},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)
},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)
},View檢視更新之前
響應式資料更新時呼叫
beforeUpdate() {
console.group("---更新之前beforeUpdate---")
console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},View視圖更新之後
DOM更新完畢，不要在這裡操作數據，可能陷入死循環
updated() {
console.group("---更新之后updated---")
console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},Vue實例物件銷毀之前|此時el和data全都還在，一般會在這一步驟進行銷毀定時器、解綁定全域事件、銷毀插件對象等操作。
beforeDestroy() {
console.group("---销毁之前beforeDestroy---")
console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},Vue實例物件銷毀之後|
destroyed() {
console.group("---销毁之后destroyed---")
console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},#vue2生命週期就是以上8個過程，在頁面中我們來看一看,上面的打印結果：
從頁面打開到完成一共經過四個生命週期，因為這裡頁面沒有其他操作，所以剩下的四個生命週期沒有對應的顯示出來
【相關推薦：javascript影片教學、vue.js教學】
以上是Vue實例的生命週期詳解之從創建到銷毀全過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
