[VueJS] 官方套件各種雷

首先，我因為不太常用眼藥水，所以，有關於眼睛酸澀流目油等事情，請不要來問我謝謝。至於是不是有這麼多雷，其實我也不太確定，只是我遇到了而已。

如果你沒有，那應該是我眼睛乾澀看錯，假的！

關於 Lifecycle Diagram

舉一個 1.x 的例子來看，先抽離 vue-router 的狀況，實際上在瀏覽器上觸發的狀況大概就是官方的順序（底下先不討論離開畫面的東西，

1. init
2. created
3. beforeCompile
4. compiled
5. attached
6. ready

各別帶出來的 this 則是這樣，

1. VueComponent，但是 $el 還沒有任何元件，是 null
2. 同上
3. $el 被綁進來了
4. 準備進入 transition
5. 進入 transition-enter 階段
6. 同上

雷在哪？

1. 由於 DOM 會先被渲染，如果有額外拿資料的動作（例如 Ajax 之類的事情，必須要在 data() 當中先給預設值，不然會噴一堆 Warning 給你（你要無視也行

2. 如果要操作 $el 的話，必須要等 beforeCompiled 之後，如果是第三方套件，有的還必須要 ready 之後，加上 setTimeout 才有效

3. 進入 transition 階段的地方，如果更改 style 小心畫面抽風（就是一大堆 transform 之類的事情

如果有 Vue-Router

一樣是以 1.x 為例子，基本上不算是什麼雷，不過有些小地方要留意，同樣的實際瀏覽器觸發情況我們來看一下，

1. VueRouter canActivate
2. VueComponent init
3. VueComponent created
4. VueComponent beforeCompile
5. VueComponent compiled
6. VueRouter activate
7. VueRouter data
8. VueComponent attached
9. VueComponent ready

同時帶出的 this 大概是這樣，

1. null
2. VueComponent，但是 $el 還沒有任何元件，是 null
3. 同上
4. $el 被綁進來了
5. 準備進入 transition
6. 同上
7. 同上
8. 進入 transition-enter 階段
9. 同上

雷在哪？

記得 Vue-Router 有個東西叫做 waitForData: true 嗎？

如果啟用了這個，當 data 還在拿資料的時候，畫面渲染可能會出點問題。由於元件覆用的關係，所以畫面上的某些部分會被重新渲染，而其實畫面並不會切換到新頁面去，舉個例子來說，

1. A 畫面使用了 waitForData: true
2. 我們直接瀏覽 B 畫面
3. 再從 B -> A
4. 這個時候，由於 A 有 waitForData: true，所以 A 畫面的資料不會被渲染，所以瀏覽器可能會先停留在 B 畫面
5. 這時候 B 畫面上面的 DOM 可能會被 A 畫面的 DOM 污染

這是蠻特殊的情況，但是我就是遇到了。

解決的方法是，不要使用 waitForData: true，讓取得資料的部分還是由 data 接手沒關係，主要是不使用 waitForData: true 的話，畫面會切回 A 畫面然後直接渲染出來，雖然畫面上的資料會是空的，不過總比畫面抽風來的好。

小計

我還是多買點眼藥水來點比較實際。