vue2.1升級2.6及element1.x升級2.x心得

前言:

博客停更很久了，可能已經習慣了日復一日的搬磚生活。工作日的兩點一線的疲憊，回家之后的低效率成了這幾個月自己狀態的一個縮影。最近和幾位朋友有過一些交流，有的辭去工作重返象牙塔，有的堅持自己的極客之道。若要論忙，比起996或者是邊學習邊工作還是相差甚遠。人，總喜歡為自己的懶找借口。

十里銀灘，自然風光，鍾靈毓秀。兩天的陽江之旅，緩解了不少工作上的疲態，躺在酒店，想想還是把這篇博客給寫完吧。

現在前端技術發展的如此之快，elementUI 1.x早已成為過去式，甚至連2.x也即將隨着vue升級到3.x版本而漸漸退場。因此這篇博客主要是對老版本elementUI項目的升級做一個記錄，也是為將來elementUI結合vue3.x升級提供一個可能的思路。本篇文章主要是結合自己最近工作中對vue2.1 + element 1.x升級到vue2.6 + element 2.15.x所遇到的問題和心得進行一個總結。

升級原因：

1.項目的技術棧比較老舊，許多業務需要在最新的elementUI的基礎上進行開發，靠原生vue手寫實現封裝花費時間較多且穩定性不是很好；
2. 老項目中存在一些設計不規范的地方，如全局樣式泄露、相同組件樣式不統一等，此次升級也能很好的對項目中不規范的地方進行一次掃雷；
3. 如今大多數開源的vue應用，如easytable、Vue-TreeSelect等都依賴於vue2.2或更高的版本，vue2.1版本顯然是沒有辦法兼容這些組件的；
4. vue2.1版本相比2.6版本缺少了一些好用的新特性，升級也是為后續vue3.x升級鋪路，保持項目技術棧的活力；

升級步驟：

技術框架升級，其實是需要一個比較長時間的預研的。如果你是對個人項目進行升級，不妨進行大膽的嘗試；如果是公司項目，還是需要長時間的預研和同事的支持，因為elementUI1.x到2.x的跨越對大型項目來說，真的有比較大的工作量，還需要花大量的時間進行測試以及升級過程中新的需求的代碼合並。由於有些內容涉及到公司的代碼，因此無法展示出來，只能用文字進行相應的介紹，不便之處，敬請諒解。

一、安裝新版本的vue和elementUI

我這里使用的是2.6.x版本，elementUI為2.15.x版本（如果你的vue-loader版本較低，可能還需要升級vue-loader）。同時，還要對其他使用的vue組件進行升級，這里主要是介紹elementUI升級，如果有其他開源組件也需要升級，可以自己摸索。

二、解決控制台警告和報錯

在安裝新版本vue和elementUI之后，我們可以嘗試運行一下我們的項目，不出意外的話是會有一些控制台報錯的，項目無法運行。不同項目的報錯和警告可能也不太一樣，我在這里總結了一些常見的警告和報錯：

1. HTML標簽未閉合：vue2.1升級到2.2時加入了HTML標簽檢查機制，如果發現了未閉合的HTML標簽，需要我們進行補全。
2. 對某些元素同時綁定了v-model和v-bind：需要移除v-bind，保留v-model
3. 在模板中使用了未在實例上掛載的變量：常見的情況如未在data中注冊變量，但是在模板中使用了該變量，這在早期vue版本中是能運行的。
4. computed中的屬性被強制修改：需要在computed中使用setter和getter訪問和設置變量。

當然可能還有別的報錯，面對這些報錯還是不能着急，一個一個修改就完事兒了，當這些控制台報錯都解決了之后，項目就能成功運行了。

三、解決非兼容性更新帶來的警告

雖然項目能跑起來了，但是控制台還會有很多警告：一部分是來自vue本身的警告，還有一些是elementUI的非兼容屬性或者即將廢棄的屬性所帶來的警告，需要我們對這些警告進行修改。常見的有：

1. v-for循環渲染組件時，必須為組件綁定key值
2. v-for綁定的key值中，存在同樣的key值
3. element中的廢棄屬性帶來的警告，如：input中的icon改為suffix-icon；switch組件屬性名稱變化等。

四、解決elementUI非兼容性更新帶來的問題

這部分是升級的重頭戲，也是問題最多的地方，稍不注意就有可能有遺漏，導致項目某些功能無法正常使用，因此需要先了解elementUI升級所帶來的所有非兼容性更新，這些非兼容性更新可以在elementUI的更新文檔中找到:https://element.eleme.cn/#/zh-CN/component/changelog，為了方便大家查找這些非兼容性更新，我按組件對這些非兼容性更新進行了匯總，上傳到了github，有需要的可以進行下載：

elementUI非兼容性更新匯總：
https://github.com/WayneWang98/element-upgrade
在這里舉出一些常見的非兼容性更新以及解決方案供大家參考：

1. 升級后很多el-icon名稱發生了變化導致無法顯示，需要去文檔查看最新的icon名稱；
2. Checkbox的change事件中，參數由event變為了value，進行修改即可；
3. 移除了input的icon屬性。現在通過suffix-icon或者suffix具名插槽來加入尾部圖標；
4. input組件的change 事件現在僅在輸入框失去焦點或用戶按下回車時觸發，與原生 input 元素一致。如果需要實時響應用戶的輸入，可以使用 input 事件；
5. Input的id屬性被傳遞到了最底層的input元素，需要關注有id的el-input；
6. el-switch中：由於 on-* 屬性在 JSX 中會被識別為事件，導致 Switch 所有 on-* 屬性在 JSX 中無法正常工作，所以 on-* 屬性更名為 active-，對應地，off- 屬性更名為 inactive-*；
7. 日期控件中，點擊清空按鈕時，change中的參數由’’變為null，需要根據實際的業務邏輯進行修改；
8. table表格組件移除通過 inline-template 自定義列模板的功能，現在可以使用slot-scope實現自定義列模板功能；
9. 表單組件的 change 事件和 Pagination 的 current-change 事件現在僅響應用戶交互：以前可以當currentPage被改變時，就會觸發current-change，現在只有用戶主動操作時才會觸發current-change，需要根據實際業務進行修改；
   10.el-dialog：移除 size 屬性，現在 Dialog 的尺寸由 width 和 fullscreen 控制 ，移除通過 v-model 控制 Dialog 顯示和隱藏的功能

更多的內容可以參考上面我的github中的詳情文檔。

非兼容性更新影響點特別多，我這里采用的方式是按模塊進行修改，對文檔中的非兼容性更新挨個進行查找與修改，與現有項目的功能保持一致。這也是最花時間的地方。修改時一定要細致謹慎，真的很容易出錯。我們是很多同事一起修改，有問題一起討論，因為項目真的很大。

五、修改樣式，進行測試

進行到了這一步，其實項目中最難的非兼容性更新已經搞定了，項目的功能是沒什么問題了，你只需要進行一些樣式調整即可與老版本項目保持一致的功能了。
至於如何進行測試，每個項目的方法也不同，但是建議把測試時間盡量拉長一點，這樣子才能發現項目中潛在的問題。

總結：

1. 一些老項目的技術棧已經較難滿足新的需求時，需要進行升級，長痛不如短痛。
2. 升級過程中先解決控制台報錯，讓項目先能夠運行起來，再對具體的功能進行驗證與修改。
3. 技術棧升級中，預研真的非常重要，足夠時間的預研能夠減少升級過程中踩到的坑，預研時可以多參考技術棧的更新文檔，這是最官方也是最全面的升級資料。