企鵝社區移動版Vue2.0升級手記

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！

---

劉小松：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：cn.vuejs.org/v2/guide/mi…

Vue Router：cn.vuejs.org/v2/guide/mi…

經過實踐，我總結了幾點在整個過程當中遇到的難點和個人解決思路：

一、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組件示例代碼：

定義到全局組件：

調用示例：

二、生命週期變化，意味着來原的邏輯將會有大的調整

圖：1.0版本

圖：2.0版本

在1.0中使用ready鉤子的地方須要替換，在2.0中可使用mounted替代，能夠參考官方文檔

固然，在整個業務邏輯中，若是使用了上述其它鉤子，也須要作調整。

三、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。

四、關於<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作響應，能夠實現帶參數的頁面動態起來。固然，這將帶來巨大的代碼改造量，須要仔細評估。

五、實現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…
獲取更多騰訊海量技術實踐乾貨，歡迎你們前往騰訊雲技術社區