“约见”面试官系列之常见面试题第七篇说说Vue的生命周期（建议收藏）
目錄
?
Vue實例的生命周期全過程（圖）
在beforeCreate和created鉤子函數間的生命周期
created鉤子函數和beforeMount間的生命周期
el選項的有無對生命周期過程的影響
template參數選項的有無對生命周期的影響
Vue的編譯過程——把模板編譯成 render 函數
beforeMount和mounted鉤子函數間的生命周期
beforeUpdate鉤子函數和updated鉤子函數間的生命周期
beforeDestroy和destroyed鉤子函數間的生命周期
Vue實例的生命周期全過程（圖）
?
?
（這里的紅邊圓角矩形內的都是對應的Vue實例的鉤子函數）
在beforeCreate和created鉤子函數間的生命周期
?
在beforeCreate和created之間，進行數據觀測(data observer) ，也就是在這個時候開始監控data中的數據變化了，同時初始化事件
created鉤子函數和beforeMount間的生命周期
?
對于created鉤子函數和beforeMount間可能會讓人感到有些迷惑，下面我就來解釋一下：
el選項的有無對生命周期過程的影響
首先系統會判斷對象中有沒有el選項
有el選項，則繼續編譯過程
沒有el選項，則停止編譯，也意味著暫時停止了生命周期，直到vm.$mount(el)
下面我展示一下：
new Vue({el: '#app',beforeCreate: function () {console.log('調用了beforeCreat鉤子函數')},created: function () {console.log('調用了created鉤子函數')},beforeMount: function () {console.log('調用了beforeMount鉤子函數')},mounted: function () {console.log('調用了mounted鉤子函數')} }) ?demo如下：
?
可以看到，在el選項填寫且正確的時候，生命周期將正常進行
?
而當我們把el去掉：
?
new Vue({beforeCreate: function () {console.log('調用了beforeCreat鉤子函數')},created: function () {console.log('調用了created鉤子函數')},beforeMount: function () {console.log('調用了beforeMount鉤子函數')},mounted: function () {console.log('調用了mounted鉤子函數')} })?
demo：
?
?
?
可以看到，生命周期的鉤子函數執行到created就結束了
而當我們不加el選項，但是手動執行vm.$mount(el)方法的話，也能夠使暫停的生命周期進行下去，例如：
var vm = new Vue({beforeCreate: function () {console.log('調用了beforeCreat鉤子函數')},created: function () {console.log('調用了created鉤子函數')},beforeMount: function () {console.log('調用了beforeMount鉤子函數')},mounted: function () {console.log('調用了mounted鉤子函數')} }) vm.$mount('#app') ??
demo如下，可以看到，這個時候雖然對象中沒有el參數，但通過$mount(el)動態添加的方式，也能夠使生命周期順利進行
?
?
?
template參數選項的有無對生命周期的影響
?
?
1.如果Vue實例對象中有template參數選項，則將其作為模板編譯成render函數
2.如果沒有template參數選項，則將外部的HTML作為模板編譯（template），也就是說，template參數選項的優先級要比外部的HTML高
3.如果1,2條件都不具備，則報錯
?
我們可以把模板寫在template參數選項中：
new Vue({el: '#app',template: '<div id="app"><p>模板在templated參數中找到了喲~</p></div>' }) demo:?
?
?
也可以把參數選項寫在外部HTML中，像這樣：
?
外部HTML：
<div id="app"><p>模板是在外部HTML中找到的~</p></div> 創建對象實例： new Vue({el: '#app' })?
demo:
?
那么有趣的問題來了，當模板同時放在template參數選項和外部HTML中，會怎樣呢？
例如：
外部HTML：
<div id="app"><p>模板是在外部HTML中找到的~</p></div>創建Vue實例（包含template參數選項）
new Vue({el: '#app',template: '<div id="app"><p>模板在templated參數中找到了喲~</p></div>' })?
demo如下:
?
很顯然，正如我上面下的結論一樣，最終顯示的是“模板在templated參數中找到了喲~”而不是“模板是在外部HTML中找到的~”，因為template參數的優先級比外部HTML的優先級要高
【注意】
1.為什么判斷el要發生在判斷template前面呢
因為Vue需要通過el的“選擇器”找到對應的template。總結一下上述的過程，Vue通過el參數去找到對應的template。然后,根據el參數給出的“選擇器”，首先去Vue實例對象本身的template選項參數中找，如果沒有template參數，則到外部HTML中尋找，找到后將模板編譯成render函數
2.實際上，在Vue中，有render函數這個選項,它以createElement作為參數，做渲染操作。當然你也可以不調用createElement，而直接嵌入JSX（學習react的同學對此應該很熟悉吧）。
new Vue({el: '#demo',render (createElement) {return (....)} })?
?
【注意】render選項參數比template更接近Vue解析器！所以綜合排列如下：
render函數選項? > template參數? > 外部HTML
?
Vue的編譯過程——把模板編譯成 render 函數
Vue的編譯實際上是指Vue把模板編譯成 render 函數的過程
我們可以通過Vue.compile這個實時編譯模板的函數來看一看：
用官方文檔的例子做個解釋：
<div><header><h1>I'm a template!</h1></header><p v-if="message">{{ message }}</p><p v-else>No message.</p> </div>?
會被渲染成
function anonymous() {with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])} }?
beforeMount和mounted鉤子函數間的生命周期
?
?
對于這一點，我也感到有些迷惑，百度后之后也沒什么頭緒，最后我思考的結果是這樣的：正因為render函數和template選項的“優先級”比外部HTML要高，所以，最后一般會存在一個外部HTML模板被Vue實例本身配置的模板所“替代”的過程也就是上圖所說的 “replace”
?
（如果大家有不同意見也可以在評論處一起討論）
beforeUpdate鉤子函數和updated鉤子函數間的生命周期
?
?
?
在Vue中，數據更改會導致虛擬 DOM 重新渲染，并先后調用beforeUpdate鉤子函數和updated鉤子函數
?
但要注意一點：重渲染（調用這兩個鉤子函數）的前提是被更改的數據已經被寫入模板中！！（這點很重要）
例如：
?
var vm = new Vue({el: '#app',data: {number: 1},template: '<div id="app"><p></p></div>',beforeUpdate: function () {console.log('調用了beforeUpdate鉤子函數')},updated: function () {console.log('調用了updated鉤子函數')} })vm.number = 2?
?
?
控制臺上并沒有如我們預料那樣輸出調用兩個鉤子函數的文本
而當我們改成
?
var vm = new Vue({el: '#app',data: {number: 1},// 在模板中使用number這個數據template: '<div id="app"><p>? {{ number }} </p></div>',beforeUpdate: function () {console.log('調用了beforeUpdate鉤子函數')},updated: function () {console.log('調用了updated鉤子函數')} })vm.number = 2?
?
?
?
這個時候，調用兩個鉤子函數的文本就被輸出來了
總之，只有Vue實例中的數據被“寫入”到我們的模板中，它的改變才可以被Vue追蹤，重渲染從而調用 beforeUpdate鉤子函數和updated鉤子函數
beforeDestroy和destroyed鉤子函數間的生命周期
?
?
beforeDestroy鉤子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed鉤子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
【注意】就如同調用在Vue實例上調用$mounted會使暫停的生命周期繼續一樣，調用$destroy()會直接銷毀實例
?
本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
總結
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第七篇说说Vue的生命周期（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机会计u8实验报告,会计信息系统实验
- 下一篇： “约见”面试官系列之常见面试题之第一百零