我们为什么以及是如何从Angular.js迁移到Vue.js？

默认情况下，每个 Rails 页面加载的时刻会衬着视图。在膳绫擎的 Vue 单文件组件中，我们将 Raisl 视图，users/edit.html.erb 文件，改为：

我们为什么以及是若何大年夜Angular.js迁徙到Vue.js？

一些背景介绍

我们的应用法度榜样(Holistics.io)是一个基于SQL的贸易智能(BI)平台，应用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用法度榜样始于2013岁尾，作为一个简单的应用法度榜样个中应用了jQuery和AngularJS。我们应用AngularJS重要特点/功能如下：

查看模型绑定(控制器，视图+模板引擎)
依附注入(办事，工厂，指令)
Angular第三方组件(uib-modal，ui-select，...)

其余的都是内部的自定义JavaScript。

我们在 Angular 中碰到的问题

跟着我们应用的进级，我们在应用 AngularJS 的时刻碰到了如许一些问题：

衬着机能：作为数据对象，因为AngularJs的特点，我们不得不花大年夜量的时光来竽暌箍现一张巨大年夜的数据表。
Angular 的文档不太好：在这成为问题之前，其他都不算什愦问题。我们越深刻地应用 AngularJS，就越认为它的文档实袈溱难以懂得。
双向数据流使得逻辑处理起来相当艰苦，不管是写组件照样写视图控制器都是如斯。这可能是AngularJS不好应用最重要的一个原因。

推敲不合的框架

在决定之前，我们细心看看各个选项：

Angular 2

我们确切花了些时光来研究 Angular 2。对于我们来说，Angular 2 甚至比 Angular 1 还让人难以懂得。它带来了太多新的变更(TypeScript)，新的模板语法等，但我们认为这并没有真正解决我们的核心问题。除此之外，大年夜 V1 到 V2 的迁徙之路在那时就一向让我们认为困惑。

ReactJS

EmberJS 不是一个 JS 库，而是一个 Web 应用框架，我们必须用基于 EmberJS 重写所有器械。

我们细心核阅了 ReactJS。尽管我们异常爱好它的┞奋学和生态道理体系，但有一件工作让我们吃惊：我们找不到一条清楚、干净、渐进的迁徙路径，来阻拦我们在3-4个月内支撑新功能。

我们为什么选择了 VueJS：慢慢迁徙

AngularJS 的应用基于 HTML 的模板体系，而 ReactJS 是用的 JSX。我们不克不及找到办法在迁徙的过程中让两种技巧很好的并存。

还有一个次要的主不雅原因，我发明 JSX 比基于 HTML 的模板加倍冗长。

EmberJS

2、把 AngularJS 办事转换为 ES6 模块

在我写这篇文┞仿的时刻，我们方才大年夜我们的应用法度榜样代码库中删除了最后一行AngularJS代码，停止了一个为期4个月的非侵人道工作，将我们的应用法度榜样大年夜AngularJS迁徙到VueJS。在这篇文┞仿中，我将分享我们在全部过程中的经验。

综合推敲各方面身分，我们最终选择了 VueJS，但对于我们来说，最重要的决定性身分是：我们看到了一个清楚、可慢慢迁徙到 VueJS，而又不会破坏成长路径的迁徙路径。实际上，我敢打赌，在全部迁徙时代，我们的客户都没有留意到什么明显的变更，他们不会知道本身拜访的页面中，哪些是 Angular 实现的，哪些是 VueJS 实现的。

Vue 采取了与 ReactJS 类似的技巧，基于组件，属性下行事宜上行等。它与 AngularJS 在模板引擎方面有着惊人的类似。它就像 AngularJS 和 ReactJS 的优美结合。这让我们认为完美，因为我们有大年夜量的 AngularJS 模板，而我们的重要问题是 Angular 组件带来的复杂逻辑。

实际上多半时刻我们须要做的只是将代码中的 ng- 改为 v-，的确太好梦了!

跟着深刻，我们更加认为作出了精确的选择，它解决了我们早期碰到的问题：很好的机能，单文件组件，清楚的代码构造，槽，等等。

我还想说的最后一点，我发明 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({    	
			 1/3    1 2 3 下一页 尾页	
			

　　推荐阅读
　　Apple Watch出现新Bug 一问Siri天气就重启
我们信赖苹不雅会很快经由过程更新的方法解决这个问题，但如今对Apple Watch用户来说，临时照样用Siri来询问气象比较好。
            【编辑推荐】比Apple Watch更惊艳的交互技巧：Project Soli隔空感应Apple Watch>>>详细阅读


本文标题：我们为什么以及是如何从Angular.js迁移到Vue.js？
地址：http://www.17bianji.com/lsqh/38491.html
 1/2    1