騰訊雲技術社群-掘金主頁持續為大家呈現雲端計算技術文章，歡迎大家關注！
劉小松：2010年加入騰訊，從事區域業務的應用開發，具備十餘年的專案經驗。在Vue的應用、騰訊新聞和微信的SPA開發有深度實踐。
前言
企鵝社群移動版前端採用VUE 1.0開發。隨著官方2.0的推出，前端界反響良好，由於專案本身在1.0的時候存在沒有解決的問題，正好在2.0中得到解決，所以義無反顧地決定升級框架至2.0版本。
首先，官方推薦使用遷移工具，對當前專案做特性識別，並給出修改意見。個人覺得可以節省很多工作，可以快速找到差異點，並快速修改程式碼。下面簡單介紹一下此次升級的過程，可為相似的專案提供參考。
第一步、安裝遷移工具
官方文件參考：github.com/vuejs/vue-m…
本案例是在tlinux環境下執行的，若windows環境下，可能後續操作略有差異。
執行命令：npm install --global vue-migration-helper
嘗試執行一下如下命令，檢查是否安裝成功：
vue-migration-helper
當執行上述命令提示vue-migration-helper: command not found時，你需要做一下ln操作。上圖中已經告知程式安裝的路徑（下述命令中請替換你的檔案路徑），所以你可以執行以下操作：
cd /usr/local/bin/
ln -s /var/www/script/node-v4.4.7-linux-x64/bin/vue-migration-helper vue-migration-helper複製程式碼第二步、藉助遷移工具來評估遷移程式碼
進入專案檔案目錄，執行命令：
vue-migration-helper ./src/app/
正常的情況下就可以得到需要升級的程式碼清單：
由於清單資料量較大，不方便檢視，可以調整一下命令將結果儲存到檔案：
vue-migration-helper ./src/app/ > /data/log/vue-update.log
下載檔案後，可以通過文字工具檢視：
第三步、升級程式碼
這個部分是升級工作中最花時間的部分。官方也有詳細的參考說明，根據對應的點進行程式碼調整即可。
Vue Router：cn.vuejs.org/v2/guide/mi…
通過實踐，我總結了幾點在整個過程中遇到的難點和我的解決思路：
1、HTML插值變化，移除了{{{value}}}語法
在1.0中，需要格式化顯示HTML內容時（用來處理換行轉<br />及一些允許使用的特殊字元），我的做法是預先定義資料處理函式，然後使用filter定義為全域性過濾器，直接對資料進行處理
Vue.filter('html', parseHtml);
{{{value | html}}}複製程式碼而在2.0中，給出了新的方案
<div v-html="value"></div>複製程式碼
根據文件大意，在v-html指令中不支援過濾器。當然，我也嘗試了一下
<div v-html="value | html"></div>複製程式碼測試結果沒有得到想要的，所以放棄了這種做法。要實現HTML的輸出：
方法一：是在JS層預先做資料格式化，再賦值給變數（也可以用“計算屬性”的方法）。優點是簡單易用，直接呼叫v-html輸出；缺點是在多種場景下呼叫的話，就會出現重複的程式碼。
方法二：封裝公用元件，將資料處理放在元件內部，再將元件定義為全域性元件。優點是可重複呼叫，統一處理方法，一處修復全域性生效。缺點是在元件巢狀時，需要單獨引入元件。
下面是htm.vue元件示例程式碼：
定義到全域性元件：
呼叫示例：
2、生命週期變化，意味著來原的邏輯將會有大的調整
圖：1.0版本
圖：2.0版本
在1.0中使用ready鉤子的地方需要替換，在2.0中可以使用mounted替代，可以參考官方文件
當然，在整個業務邏輯中，如果使用了上述其它鉤子，也需要做調整。
3、VueRouter升級，導航鉤子變化較大，帶來的程式碼改造相對較多
詳細的升級說明，請參考官方文件：cn.vuejs.org/v2/guide/mi…
在0.7中，當頁面上有鑑權操作時，我會用到activate鉤子，鑑權失敗後可以友好終止使用者的訪問。升級後，雖然官方文件中建議使用beforeRouteEnter鉤子替代，但缺點是無法訪問this，需要做next回撥來實現。
所以，我決定使用全域性鉤子來統一實現鑑權，實踐證明能節省不少程式碼，在全域性鉤子中實現鑑權後，後續業務邏輯可以不再關注鑑權邏輯，程式碼更清爽了。
當然afterEach也非常好用，可以通過它來設定頁面title等一些後續操作。
在0.7中，在載入資料環節，會用到data鉤子，它專用於設定當前元件的資料，在2.0中，移除了此方法，確實帶來了不便。文件建議使用watcher對$route做響應，然後呼叫定義的方法來處理。
實際專案中，獲取元件資料的可以在template編譯前執行，因此created鉤子可以用來處理資料，程式碼升級的改造量最小。
通過watcher對$route做響應似乎有更重要的事情要做，看如下路由配置：
當路由帶引數時，引數變化不會導致整個元件重新初始化，因此不會再執行created事件。在這種場景下，就必須使用watcher。
4、關於<keep-alive>元件的使用
在使用該元件時，需要考慮專案是否適用。下述情況不建議使用：
1）當資料互動相對較多的情況下，資料不會及時更新；
2）當頁面需要帶引數進行訪問時，引數變化可能導致資料未更新；
3）需要及時鑑權的頁面
我企鵝社群專案中，要讓<keep-alive>生效，需要在頂層入口新增指令，模板如下：
<keep-alive>
<router-view></router-view>
</keep-alive>複製程式碼其中<router-view>即是動態元件，此時會將整個專案的路由快取起來（有些路由我是不希望被快取的），這也是我感到<keep-alive>不夠靈活的地方。
當然，事實也並非不可解決，Vue提供了兩個專用方法可以場景下使用：
1）activated：在keep-alive元件啟用時呼叫；
2）deactivated：在keep-alive 元件停用時呼叫；
因此在部分場景下，可以藉助activated鉤子來對資料進行處理，同時也藉助watcher對$route做響應，可以實現帶引數的頁面動態起來。當然，這將帶來巨大的程式碼改造量，需要仔細評估。
5、實現scrollBehavior遇到的坑
在router配置相對簡單，僅需要新增一個方法即可：
配置後，並沒有得到預想的效果。在測試過程中，列印savedPosition的值，始終為“0，0”，猜想scroll觸發的事件沒有正確獲得滾動位置，於是查閱了VueRouter的實現程式碼
這裡監控的是整個頁面的滾動位置，而我們在實現上對body、#app掛載節點上做了height=100%的處理，導致滾動時並沒有觸發window的scroll。
於是，通過改造頁面部局，將height=100%的定義去掉後，scrollBehavior終於生效了。但新的問題也隨之而來，當body的高度沒有超過window的高度時，會影響到頁面上定義的浮層效果，所以優化無止境，還在探索中。
結束
此次升級原本計劃3天時間，而最終花費的時間是1周。根據官方文件進行程式碼遷移後，仍然會有大量的報錯，所以除錯的過程也是深度理解Vue2.0變化的過程。
本文有一部分內容未提及，就是生產環境的升級，包括nodejs、webpack和Vue所依賴的庫等系列工具，這部分雖然有一些變化，但都比較容易調整，這裡就不多說了。
企鵝社群專案的移動版體驗地址請掃二維碼
相關閱讀
Vue.js 實戰總結
前端 fetch 通訊
vue.js 初體驗— Chrome 外掛開發實錄
此文已由作者授權騰訊雲技術社群釋出，轉載請註明文章出處
原文連結：www.qcloud.com/community/a…
獲取更多騰訊海量技術實踐乾貨，歡迎大家前往騰訊雲技術社群