淺談vue生命周期共有幾個階段？分別是什么？

更新時間：2020年08月07日 14:55:22 作者：brain_bo

這篇文章主要介紹了淺談vue生命周期共有幾個階段？分別是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

一共8個階段

1、beforeCreate（創(chuàng)建前）

2、created（創(chuàng)建后）

3、beforeMount（載入前）

4、mounted（載入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、beforeDestroy（銷毀前）

8、destroyed（銷毀后）

vue第一次頁面加載會觸發(fā)哪幾個鉤子函數？

beforeCreate、created、beforeMount、mounted

DOM 渲染在哪個周期中就已經完成？

mounted

補充知識：記錄一次vue數據不同步的排查

今天我遇到了一個vue異步獲取數據后視圖沒有更新的問題，排查了很久很久，最后才發(fā)現自己踩在了一個自己萬萬沒有想到的坑上，所以記錄一下。

常見的解決方案

關于vue數據不同步的排查已經有很多類似的博客了，一般而言，原因有一下幾點：

數據沒有設置成功

設置的數據不是響應式的

設置的數據和視圖上的變量不是同一個，可能設置錯了變量

既然寫到類似話題，我也羅列一下相關的解決方案：

使用this.$set()，

可以嘗試類似this.data=JSON.parse(JSON.stringify(data))去排查是不是數據劫持的問題。

這個我一個同事遇到過一次，他發(fā)現他的變量里面部分屬性沒有設置get/set（就是沒有被vue監(jiān)聽到，所以無法響應式），原因大概是他在原變量上加了新屬性，但是沒有被vue監(jiān)聽到。這是一個很有迷惑性的例子，大家可以看看下面的代碼：

這里其實是希望屬性b可以被監(jiān)聽到的，所以嘗試重新給this.data賦值，但是很遺憾，const data的引用和this.data是同一個，this.data = data并不能實現變量的覆蓋（因為vue只有變量和之前不同才會對變量里面的所有屬性做劫持，同一個引用，vue不會對新屬性進行監(jiān)聽）

// 例子
// 假設已經有一個data
{
 data(){
 return {
  data:[{a:1}]
 }
 },
 created(){
 /* 在這里其實我們是希望將變量覆蓋的 */
 const data = this.data
 data[0].b = 1
 this.data = data
 }
}

可以看大以下輸出，可以看到a屬性是有get和set的，即他們已經是響應式的了，但是b卻沒有get/set。使用this.data=JSON.parse(JSON.stringify(data))的原理實際上就是為了創(chuàng)建一個新的對象重新賦值。

如果還是不行，要仔細檢查變量有沒有設置成功，可以通過vue的Devtools工具查看，或者直接輸出到控制臺里面查看。有可能是this等的指向不對或者是拼寫錯誤導致變量賦值失敗

還要看看視圖里面的變量和你所希望更新的變量是不是同一個，會不會是視圖里面的變量寫錯了

其他的方法還包括:重啟以下瀏覽器，看看是不是瀏覽器本身異常了等。

接下來，就是我個人的比較獨特的問題了，如果你還沒有解決，或者好奇我遇到的是一個怎樣的問題，你也可以往下讀。

問題描述

在chrome瀏覽器上開發(fā)vue項目，結果突然發(fā)現異步獲取數據后視圖沒有更新。

排查

這個問題很奇怪，因為之前在公司的時候，代碼明明是沒有問題的，當時我以為可能是自己不小心改了什么代碼，出bug了。當然我心里一點都不慌，數據沒有更新嘛，一般原因有以下幾點：

數據沒有設置成功

設置的數據不是響應式的

設置的數據和視圖上的變量不是同一個，可能設置錯了變量

結果?。?！竟然不是這些原因，我通過vue的Devtools工具查看，發(fā)現數據正確設置了，而且是響應式的，可以動態(tài)更新。我不放心，又通過debugger打斷點，并輸出了相應的data到控制臺上，結果確認我所希望使用的變量確實已經被vue進行了劫持（vue2的響應式其實就是通過Object.defineProperty對數據進行監(jiān)聽）

我隨便mock了一個數據截圖如下：如果一個變量屬性是響應式的，那它應該會多出了下圖中框住的get/set。