Vue生命周期從創(chuàng)建到銷(xiāo)毀的過(guò)程是什么
這篇文章主要介紹“Vue生命周期從創(chuàng)建到銷(xiāo)毀的過(guò)程是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue生命周期從創(chuàng)建到銷(xiāo)毀的過(guò)程是什么”文章能幫助大家解決問(wèn)題。
成都創(chuàng)新互聯(lián)公司主營(yíng)淶源網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,淶源h5微信小程序搭建,淶源網(wǎng)站營(yíng)銷(xiāo)推廣歡迎淶源等地區(qū)企業(yè)咨詢(xún)
Vue的生命周期一直以來(lái)都是重中之重，雖然在實(shí)際開(kāi)發(fā)中經(jīng)常用到的就幾個(gè)，但是你對(duì)生命周期的掌握程度決定著你寫(xiě)的程序好不好，并且這一塊也一直是面試Vue部分的重要考點(diǎn)。
初識(shí)new Vue
關(guān)于new Vue 大家應(yīng)該都知道，new關(guān)鍵字在js中是實(shí)例化一個(gè)對(duì)象。那么 new Vue 都干了啥？
其實(shí)，new Vue就是創(chuàng)建了一個(gè)Vue實(shí)例,Vue實(shí)例上是一個(gè)類(lèi),new Vue實(shí)際上是執(zhí)行了Vue類(lèi)的構(gòu)造函數(shù)
創(chuàng)建Vue實(shí)例：
let vm = new Vue({
el: "#app",
data: {
name: 'beiyu'
},
}那么關(guān)于這個(gè)實(shí)例，從它初始化到銷(xiāo)毀，都經(jīng)歷了什么呢？下面一起來(lái)看看：
Vue實(shí)例從創(chuàng)建到銷(xiāo)毀
實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程我們稱(chēng)作生命周期
生命周期的基本概念：
每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程。
例如：需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了使用者在不同階段添加自己代碼的機(jī)會(huì)。
1.創(chuàng)建之前—beforeCreate()
Vue實(shí)例對(duì)象創(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實(shí)例對(duì)象創(chuàng)建之后
data屬性存在,el屬性為空,ref屬性?xún)?nèi)容為空數(shù)組，常用于進(jìn)行axios請(qǐng)求，頁(yè)面的初始化等。但是這里不要請(qǐng)求過(guò)多，否則會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏現(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.實(shí)例對(duì)象和文檔掛載之前—beforeMount()
Vue實(shí)例對(duì)象和文檔掛載之前，會(huì)去找對(duì)應(yīng)的template
beforeMount() {
// 這個(gè)時(shí)候$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.實(shí)例對(duì)象和文檔掛載之后—mounted()
Vue實(shí)例對(duì)象和文檔節(jié)點(diǎn)掛載之后
el屬性存在,ref屬性可以訪問(wèn)
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ù)更新時(shí)調(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.實(shí)例銷(xiāo)毀之前—beforeDestroy()
Vue實(shí)例對(duì)象銷(xiāo)毀之前|此時(shí)el和data全都還在，一般會(huì)在這一步進(jìn)行銷(xiāo)毀定時(shí)器、解綁全局事件、銷(xiāo)毀插件對(duì)象等操作。
beforeDestroy() {
console.group("---銷(xiāo)毀之前beforeDestroy---")
console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},8.實(shí)例銷(xiāo)毀之后—destroyed()
Vue實(shí)例對(duì)象銷(xiāo)毀之后|
destroyed() {
console.group("---銷(xiāo)毀之后destroyed---")
console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},總結(jié)
vue2生命周期就是以上8個(gè)過(guò)程，在頁(yè)面中我們來(lái)看一看,上面的打印結(jié)果：
從頁(yè)面打開(kāi)到完成一共經(jīng)過(guò)四個(gè)生命周期，因?yàn)檫@里頁(yè)面沒(méi)有其他操作，所以剩下的四個(gè)生命周期沒(méi)有對(duì)應(yīng)的顯示出來(lái)
關(guān)于“Vue生命周期從創(chuàng)建到銷(xiāo)毀的過(guò)程是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
分享標(biāo)題：Vue生命周期從創(chuàng)建到銷(xiāo)毀的過(guò)程是什么
本文來(lái)源：http://m.jiaotiyi.com/article/jpejje.html