生活随笔
收集整理的這篇文章主要介紹了
“约见”面试官系列之常见面试题第四十一篇之VUE生命周期（建议收藏）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
詳解Vue Lifecycle
先來看看VUE官網(wǎng)對VUE生命周期的介紹
Vue實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。
每一個組件或者實例都會經(jīng)歷一個完整的生命周期，總共分為三個階段：初始化、運行中、銷毀。
實例、組件通過new Vue() 創(chuàng)建出來之后會初始化事件和生命周期，然后就會執(zhí)行beforeCreate鉤子函數(shù)，這個時候，數(shù)據(jù)還沒有掛載呢，只是一個空殼，無法訪問到數(shù)據(jù)和真實的dom，一般不做操作
掛載數(shù)據(jù)，綁定事件等等，然后執(zhí)行created函數(shù)，這個時候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會觸發(fā)updated函數(shù)，在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始找實例或者組件對應(yīng)的模板，編譯模板為虛擬dom放入到render函數(shù)中準(zhǔn)備渲染，然后執(zhí)行beforeMount鉤子函數(shù)，在這個函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染,在這里也可以更改數(shù)據(jù)，不會觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始render，渲染出真實dom，然后執(zhí)行mounted鉤子函數(shù)，此時，組件已經(jīng)出現(xiàn)在頁面中，數(shù)據(jù)、真實dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了，可以在這里操作真實dom等事情...
當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后，會立即執(zhí)行beforeUpdate，然后vue的虛擬dom機制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒
當(dāng)更新完成后，執(zhí)行updated，數(shù)據(jù)已經(jīng)更改完成，dom也重新render完成，可以操作更新后的虛擬dom
當(dāng)經(jīng)過某種途徑調(diào)用$destroy方法后，立即執(zhí)行beforeDestroy，一般在這里做一些善后工作，例如清除計時器、清除非指令綁定的事件等等
組件的數(shù)據(jù)綁定、監(jiān)聽...去掉后只剩下dom空殼，這個時候，執(zhí)行destroyed，在這里做善后工作也可以
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><aaa></aaa></div><template id="aaa"><div><p class="myp">A組件</p><button @click="destroy">destroy</button><input type="text" v-model="msg"><p>msg:{{msg}}</p></div></template></body><script src="./vue.js"></script><script>//生命周期：初始化階段 運行中階段 銷毀階段Vue.component("aaa",{template:"#aaa",data:function(){return {msg:'hello'}},timer:null,methods:{destroy:function(){this.$destroy()//}},beforeCreate:function(){console.log('beforeCreate:剛剛new Vue()之后，這個時候，數(shù)據(jù)還沒有掛載呢，只是一個空殼')console.log(this.msg)//undefinedconsole.log(document.getElementsByClassName("myp")[0])//undefined},created:function(){console.log('created:這個時候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會觸發(fā)updated函數(shù)')this.msg+='!!!'console.log('在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取')console.log('接下來開始找實例或者組件對應(yīng)的模板，編譯模板為虛擬dom放入到render函數(shù)中準(zhǔn)備渲染')},beforeMount:function(){console.log('beforeMount：虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染,在這里也可以更改數(shù)據(jù)，不會觸發(fā)updated')this.msg+='@@@@'console.log('在這里可以在渲染前最后一次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取')console.log(document.getElementsByClassName("myp")[0])//undefinedconsole.log('接下來開始render，渲染出真實dom')},// render:function(createElement){// console.log('render')// return createElement('div','hahaha')// },mounted:function(){console.log('mounted：此時，組件已經(jīng)出現(xiàn)在頁面中，數(shù)據(jù)、真實dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了')console.log(document.getElementsByClassName("myp")[0])console.log('可以在這里操作真實dom等事情...')// this.$options.timer = setInterval(function () {// console.log('setInterval')// this.msg+='!'// }.bind(this),500)},beforeUpdate:function(){//這里不能更改數(shù)據(jù)，否則會陷入死循環(huán)console.log('beforeUpdate:重新渲染之前觸發(fā)')console.log('然后vue的虛擬dom機制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染')},updated:function(){//這里不能更改數(shù)據(jù)，否則會陷入死循環(huán)console.log('updated:數(shù)據(jù)已經(jīng)更改完成，dom也重新render完成')},beforeDestroy:function(){console.log('beforeDestory:銷毀前執(zhí)行（$destroy方法被調(diào)用的時候就會執(zhí)行）,一般在這里善后:清除計時器、清除非指令綁定的事件等等...')// clearInterval(this.$options.timer)},destroyed:function(){console.log('destroyed:組件的數(shù)據(jù)綁定、監(jiān)聽...都去掉了,只剩下dom空殼，這里也可以善后')}})new Vue({}).$mount('#app')</script></html>
本面試題為前端常考面試題，后續(xù)有機會繼續(xù)完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?
總結(jié)
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第四十一篇之VUE生命周期（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
