在我寫這篇文章的時候，咱們剛剛從咱們的應用程序代碼庫中刪除了最後一行AngularJS代碼，結束了一個爲期4個月的非侵入性工做，將咱們的應用程序從AngularJS遷移到VueJS。在這篇文章中，我將分享咱們在整個過程當中的經驗。javascript
一些背景介紹
咱們的應用程序（Holistics.io）是一個基於SQL的商業智能（BI）平臺，使用Rails、Sidekiq、PostgreSQL和AngularJS編寫。咱們的Rails應用程序始於2013年末，做爲一個簡單的應用程序其中使用了jQuery和AngularJS。咱們使用AngularJS主要特性/功能以下：html
-
查看模型綁定（控制器，視圖+模板引擎）前端
-
依賴注入（服務，工廠，指令）vue
-
Angular第三方組件（uib-modal，ui-select，...）java
其他的都是內部的自定義JavaScript。ios
咱們在 Angular 中遇到的問題
隨着咱們應用的升級，咱們在使用 AngularJS 的時候遇到了這樣一些問題：git
-
渲染性能：做爲數據工具，因爲AngularJs的特性，咱們不得不花大量的時間來呈現一張巨大的數據表。es6
-
Angular 的文檔不太好：在這成爲問題以前，其餘都不算什麼問題。咱們越深刻地使用 AngularJS，就越以爲它的文檔實在難以理解。github
-
雙向數據流使得邏輯處理起來至關困難，不論是寫組件仍是寫視圖控制器都是如此。這多是AngularJS很差使用最重要的一個緣由。編程
考慮不一樣的框架
在決定以前，咱們仔細看看各個選項：
Angular 2
咱們確實花了些時間來研究 Angular 2。對於咱們來講，Angular 2 甚至比 Angular 1 還讓人難以理解。它帶來了太多新的變化（TypeScript），新的模板語法等，但咱們以爲這並無真正解決咱們的核心問題。除此以外，從 V1 到 V2 的遷移之路在那時就一直讓咱們以爲困惑。
ReactJS
咱們仔細審視了 ReactJS。儘管咱們很是喜歡它的哲學和生態原理系統，但有一件事情讓咱們吃驚：咱們找不到一條清晰、乾淨、漸進的遷移路徑，來阻止咱們在3-4個月內支持新功能。
AngularJS 的使用基於 HTML 的模板系統，而 ReactJS 是用的 JSX。咱們不能找到辦法在遷移的過程當中讓兩種技術很好的並存。
還有一個次要的主觀緣由，我發現 JSX 比基於 HTML 的模板更加冗長。
EmberJS
EmberJS 不是一個 JS 庫，而是一個 Web 應用框架，咱們必須用基於 EmberJS 重寫全部東西。
咱們爲何選擇了 VueJS：逐步遷移
綜合考慮各方面因素，咱們最終選擇了 VueJS，但對於咱們來講，最重要的決定性因素是：咱們看到了一個清晰、可逐步遷移到 VueJS，而又不會破壞發展路徑的遷移路徑。實際上，我敢打賭，在整個遷移期間，咱們的客戶都沒有注意到什麼明顯的變化，他們不會知道本身訪問的頁面中，哪些是 Angular 實現的，哪些是 VueJS 實現的。
Vue 採用了與 ReactJS 類似的技術，基於組件，屬性下行事件上行等。它與 AngularJS 在模板引擎方面有着驚人的類似。它就像 AngularJS 和 ReactJS 的優美結合。這讓咱們以爲完美，由於咱們有大量的 AngularJS 模板，而咱們的主要問題是 Angular 組件帶來的複雜邏輯。
實際上多數時候咱們須要作的只是將代碼中的 ng- 改成 v-，簡直太美妙了！
隨着深刻，咱們愈加以爲做出了正確的選擇，它解決了咱們早期遇到的問題：很好的性能，單文件組件，清晰的代碼結構，槽，等等。
並且，在遷移的過程當中，因爲 Vue 結構的方式（單向數據流，基於組件），它迫使咱們反思和重構代碼，而不是繼續寫爛代碼，這簡化了咱們的代碼邏輯。
我還想說的最後一點，我發現 VueJS 的文檔寫得很是好，結構也很是清晰。這也是咱們選擇 VueJS 的另外一個主要緣由。我第一次使用 Vue 的時候，花了 30 分鐘來閱讀它的文檔，當即以爲必需要試試這個東西。
咱們是怎麼進行逐步遷移的：
下面是咱們遷移的簡單步驟（注意有些內容與咱們運行的 Rails 應用環境有關，若是你沒有使用 Rails，可能會有些不一樣）：
1. 把 AngularJS 控制器邏輯轉換到 VueJS
在逐步遷移策略中，咱們要在引入 VueJS 時儘量少作改動。所以，咱們從標準的 AngularJS 和模板文件開始修改，將 VueJS 引入其中：
// user_edit_controller.js.es6` import Vue from 'vue' app.controller('UserEditCtrl', ['$scope', '$http', 'Ajax', 'Util', 'Modals', function ($scope, $http, Ajax, Util, Modals) { let vapp = new Vue({ el: '#v-wrapper', components: { ... }, data: { } }); } ]);
<!-- `users/edit.html.erb` --> <div ng-controller="UserEditCtrl"> <div id="v-wrapper"> <!-- vuejs logic goes here... --> <input v-model="username" placeholder="Username" /> ... </div> </div>
咱們在應用中引入了 Vue 的邏輯，卻不須要改變任何相關應用的前端結構。這極大程度的幫助咱們下降在遷移過程當中發生錯誤的風險，咱們能夠花 1-2 個小時迅速地將一小部分 AngularJS 實現的東西轉換爲 VueJS 實現，而後測試並部署，不用擔憂它會致使迴歸缺陷。
2. 把 AngularJS 服務轉換爲 ES6 模塊
咱們首先須要找到一個 AngularJS 中大量使用的 $http 服務的替代品。咱們直接使用了 axios。咱們再也不直接使用 $http，但咱們圍繞它進行了抽象封裝，以使修改變得很是簡單。
而後，咱們像這樣定義了大量的 AngularJS：
// users.js app.service('Users', ['$http', 'Ajax', function ($http, Ajax) { this.create = function(user) { // ... } } ]);
使用 ES6 類語法代替就好：
// users.js.es6 export default class Users { static create(user) { // ... } }
若是其它控制器中使用有 Angular 代碼在使用這些服務，咱們會複製這些服務並使用 ES6 類語法來實現，同時保持原有的 Angular 版本，直到再也不有 Angular 代碼使用它們爲止。這會在短期內讓代碼出現重複，但咱們只須要當心一點，在代碼中多寫些註釋來關聯兩個版本。
3. 使用 VueJS 組件代替 AngularJS 控制器
完成上述兩點以後，一些 AngularJS 控制器能夠徹底遷移到 VueJS，這和上面的第 2 步類似，咱們使用 ES6 語法來代替 app.controller() 定義。不過此次，咱們使用 Vue 的單文件組件：
文件：user_edit.vue
<template> <div> <!-- vuejs logic goes here... --> <input v-model="username" placeholder="Username" /> ... </div> </template> <script> import Users from 'users.js.es6' export default { data: { }, methods: { }, mounted() { // initializing } }; </script>
4. 爲 Rails 控制器/視圖添加安裝入口
默認狀況下，每一個 Rails 頁面加載的時候會渲染視圖。在上面的 Vue 單文件組件中，咱們將 Raisl 視圖，users/edit.html.erb 文件，改成：
<div class="v-user-edit"> <user-edit></user-edit> </div>
而後加些代碼在頁面加載的時候將其安裝爲正確的 Vue 組件：
import UserEdit from 'user_edit.vue' let vueConfig = { el: '.v-user-edit', components: { UserEdit } }; new Vue(vueConfig);
實際上，上面的代碼被抽象成了可複用的函數，在不一樣的頁面中調用。
總結
咱們在 2017 年九月末完成了框架的遷移，經歷了大約 4 個月時間的非侵入性（咱們在遷移過程當中會繼續添加其它新特性）工做。實際上咱們並無把遷移做爲最緊急的任務，無論何時，只要咱們的改動涉及到舊的 Angular 代碼，咱們會先把它轉換成 Vue 實現，而後再進行變動。
遷移完成後，咱們收穫了：
-
很是整潔的代碼和模塊（基於組件的），以及 VueX 和 Vue Store；它們大大提升了編程效率
-
再沒有複雜的邏輯
-
改善了 UI 性能
這並非說 Vue 就是最好的，它只是在咱們特定的狀況下工做良好：Angular 固有的設計本質致使使用 Angular 實現應用很重，而 Vue 爲咱們很好地填補了這一空白，這一切都是天然而然地逐步遷移實現的。
你怎麼想？請在下面的評論中與咱們分享。但願瞭解更多大家遇到的狀況！