在我写这篇文章时，我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码，结束了为期4个月的非侵入式努力，将我们的应用程序从AngularJS迁移到VueJS。在这篇文章中，我将分享我们在整个过程中的经验。一些背景我们的应用程序(Holistics.io)是一个基于SQL的商业智能(BI)平台，使用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用程序始于2013年底，是一个使用jQuery和AngularJS的简单应用程序。我们使用AngularJS的主要特性/功能如下：视图模型绑定（控制器、视图+模板引擎）依赖注入（服务、工厂、指令）Angular第三方组件（uib-modal、ui-select，...）其余的都是内部自定义的javascript。我们在Angular中遇到的问题随着我们应用的升级，我们在使用AngularJS时遇到了一些问题：渲染性能：作为一个数据工具，由于AngularJS的特性，我们不得不花费大量的时间来渲染一个Huge数据表。Angular的文档不是很好：在这成为问题之前，其他都不是问题。我们越是使用AngularJS，就越难理解它的文档。双向数据流让逻辑变得相当困难，无论是写组件还是写视图控制器。这可能是AngularJS不好用的最重要原因。考虑不同的框架在决定之前，让我们仔细看看选项：Angular2我们确实花了一些时间研究Angular2。对我们来说，Angular2甚至比Angular1更令人困惑。它带来了太多的新变化（TypeScript），新的模板语法等等，但我们觉得并没有真正解决我们的核心问题。除此之外，从V1到V2的迁移路径当时让我们感到困惑。ReactJS我们仔细研究了ReactJS。尽管我们喜欢它的哲学和原则生态系统，但有一件事让我们感到惊讶：我们找不到一条清晰、干净、渐进的迁移路径来阻止我们在3-4个月内支持新功能。AngularJS使用基于HTML的模板系统，而??ReactJS使用JSX。在迁移过程中，我们找不到让这两种技术很好共存的方法。还有一个不太主观的原因，我发现JSX比基于HTML的模板更冗长。EmberJSEmberJS不是一个JS库，而是一个Web应用程序框架，我们必须基于EmberJS重写所有内容。为什么我们选择VueJS：一步一步的迁移经过所有考虑我们最终选择了VueJS，但对我们来说最重要的决定因素是：我们看到了一个干净的、一步一步的迁移到VueJS而没有中断开发路径到迁移路径。事实上，我敢打赌，在整个迁移期间，我们的客户并没有注意到明显的变化，他们也不知道他们正在访问的页面哪些是用Angular实现的，哪些是用VueJS实现的。Vue采用了类似ReactJS的技术，基于组件，属性下行事件上行等，在模板引擎方面与AngularJS惊人的相似。它就像是AngularJS和ReactJS的完美结合。这对我们来说非常有效，因为我们有很多AngularJS模板，而我们的主要问题是Angular组件带来的复杂逻辑。其实很多时候我们只需要将代码中的ng-改成v-就好了！随着深入，我们越来越觉得自己的选择是正确的，它解决了我们之前遇到的问题：非常好的性能，单文件组件，清晰的代码结构，slots等等。另外，在迁移过程中，由于Vue的结构化方式（单向数据流，基于组件），它迫使我们反思和重构我们的代码，而不是继续编写糟糕的代码，这简化了我们的代码逻辑。最后一件事我想说的是，我发现VueJS的文档写得非常好并且结构非常清晰。这也是我们选择VueJS的另一个主要原因。第一次使用Vue时，我花了30分钟阅读了它的文档，并立即觉得我必须尝试一下这个东西。我们是如何一步步迁移的：以下是我们迁移的简单步骤（注意部分内容与我们运行的Rails应用环境有关，如果你没有使用Rails，可能会有所不同）：1.转换AngularJS控制器逻辑以VueJS的渐进迁移策略，我们希望以尽可能少的更改引入VueJS。因此，我们从标准的AngularJS和模板文件入手，将VueJS引入其中：//user_edit_controller.js.es6`importVuefrom'vue'app.controller('UserEditCtrl',['$scope','$http','Ajax','Util','Modals',function($scope,$http,Ajax,Util,Modals){letvapp=newVue({el:'#v-wrapper',组件:{...},数据:{}});}]);
