淺談vue生命周期共有幾個階段？分別是什么？
一共8個階段
1、beforeCreate（創建前）
2、created（創建后）
3、beforeMount（載入前）
4、mounted（載入后）
5、beforeUpdate（更新前）
6、updated（更新后）
7、beforeDestroy（銷毀前）
8、destroyed（銷毀后）
vue第一次頁面加載會觸發哪幾個鉤子函數？
beforeCreate、created、beforeMount、mounted
DOM 渲染在哪個周期中就已經完成？
mounted
補充知識：記錄一次vue數據不同步的排查
今天我遇到了一個vue異步獲取數據后視圖沒有更新的問題，排查了很久很久，最后才發現自己踩在了一個自己萬萬沒有想到的坑上，所以記錄一下。
常見的解決方案
關于vue數據不同步的排查已經有很多類似的博客了，一般而言，原因有一下幾點：
數據沒有設置成功
設置的數據不是響應式的
設置的數據和視圖上的變量不是同一個，可能設置錯了變量
既然寫到類似話題，我也羅列一下相關的解決方案：
使用this.$set()，
可以嘗試類似this.data=JSON.parse(JSON.stringify(data))去排查是不是數據劫持的問題。
這個我一個同事遇到過一次，他發現他的變量里面部分屬性沒有設置get/set（就是沒有被vue監聽到，所以無法響應式），原因大概是他在原變量上加了新屬性，但是沒有被vue監聽到。這是一個很有迷惑性的例子，大家可以看看下面的代碼：
這里其實是希望屬性b可以被監聽到的，所以嘗試重新給this.data賦值，但是很遺憾，const data的引用和this.data是同一個，this.data = data并不能實現變量的覆蓋（因為vue只有變量和之前不同才會對變量里面的所有屬性做劫持，同一個引用，vue不會對新屬性進行監聽）
// 例子// 假設已經有一個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))的原理實際上就是為了創建一個新的對象重新賦值。
如果還是不行，要仔細檢查變量有沒有設置成功，可以通過vue的Devtools工具查看，或者直接輸出到控制臺里面查看。有可能是this等的指向不對或者是拼寫錯誤導致變量賦值失敗
還要看看視圖里面的變量和你所希望更新的變量是不是同一個，會不會是視圖里面的變量寫錯了
其他的方法還包括:重啟以下瀏覽器，看看是不是瀏覽器本身異常了等。
接下來，就是我個人的比較獨特的問題了，如果你還沒有解決，或者好奇我遇到的是一個怎樣的問題，你也可以往下讀。
問題描述
在chrome瀏覽器上開發vue項目，結果突然發現異步獲取數據后視圖沒有更新。
排查
這個問題很奇怪，因為之前在公司的時候，代碼明明是沒有問題的，當時我以為可能是自己不小心改了什么代碼，出bug了。當然我心里一點都不慌，數據沒有更新嘛，一般原因有以下幾點：
數據沒有設置成功
設置的數據不是響應式的
設置的數據和視圖上的變量不是同一個，可能設置錯了變量
結果?。?！竟然不是這些原因，我通過vue的Devtools工具查看，發現數據正確設置了，而且是響應式的，可以動態更新。我不放心，又通過debugger打斷點，并輸出了相應的data到控制臺上，結果確認我所希望使用的變量確實已經被vue進行了劫持（vue2的響應式其實就是通過Object.defineProperty對數據進行監聽）
我隨便mock了一個數據截圖如下：如果一個變量屬性是響應式的，那它應該會多出了下圖中框住的get/set。
由此我確認了我的數據是響應式的，我又再三確認了視圖的變量沒有問題。這時，我開始慌了，感覺自己可能掉進了一個不好排查的坑里面出不來了。果然，我嘗試了各種辦法，卻始終無法解決這個問題。期間我也試了各種各樣的手段去搜索，始終一無所獲。
直到我試著在360瀏覽器上打開這個頁面，發現頁面的數據竟然可以動態刷新?。。∵@時我反應過來，難道是瀏覽器的兼容問題，或者是瀏覽器本身異常？
我又試著重啟chrome瀏覽器，發現還是不行。
難道真的是兼容問題嗎？但是沒有理由的呀，之前在公司明明是正常的，難道還和瀏覽器版本有關系？這時我開始想這個數據和普通的數據有什么不同，一個明顯的不同是這個數據嵌套比較深？不會吧，數據嵌套太深會導致數據無法同步的嗎？
說實話，我糾結了很久，最后是真的無意間發現了真相：
真相
導致我數據無法同步的真兇竟然是Google 翻譯這個插件。。。
真相是這樣的，我對頁面頭部寫了<html lang='en'>結果瀏覽器插件就幫我對頁面進行了翻譯，當然我的頁面本身就是中文，我并沒有看出異常。但是這個時候的頁面已經是翻譯的頁面了，我dom的變化這個翻譯的頁面是不會同步的。所以就導致了我所看到的數據沒有刷新的問題。
發現真相的時候我的內心是崩潰的，搞了這么就原因竟然是這個。
以上這篇淺談vue生命周期共有幾個階段？分別是什么？就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
1. 如何解決docker宿主機無法訪問容器中的服務？2. css3 - CSSComb for Sublime Text 在 Windows 下無法使用。3. thinkphp框架放根目錄無法像老師一樣可以正常訪問4. $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合 哪位大神來解釋下？5. css3 - 獲取translateX的值6. index.php錯誤，求指點7. java - web端百度網盤的一個操作為什么要分兩次請求服務器, 有什么好處嗎8. Android 高德地圖如何移除添加的某個marker？9. html5 - 如何實現圖中的刻度漸變效果？10. 為什么我寫的PHP不行
網公網安備