chechengpeng

从 Angular 迁移到 Vue: 一个 vuetiful 的旅程 – Hemant Rai – Medium

原文链接: medium.com

从 Angular 迁移到 Vue

我从事于一个有着几个前端平台的 SaaS 产品,它们全部都是在 Angular 1 框架上编写的。在生产环境运行了两年多之后,Angular 已显现出其颓势而且随着数据的增长它处理起来也显得力不从心(大于2000个watchers,必然会有这么多,性能表现甚至比你在 2009年的机器上运行FIFA 16 的体验还要差?)。

大约6个月前,我们不得不重写一个核心前端插件,我们决定试试 Vuejs。基于 官方文档 和一些 hello word 实例,它看起来很适合我们的使用场景。并且,Angular 是未来的一个高危风险,我们需要为它寻找替代品。这对Vue来说像是一个完美的检验。

被替换的是一个表单构建和渲染的插件,不得不处理具有大量复杂规则和验证的表单。它们大部分需要使用 if/show/hide 等 DOM 操作和带有过滤器的 repeats。Angular 处理起来很优秀。这不是性能上的重写而是结构性的。但是有时 Angular 也会出现意外。表单是用户生成的,并且有时候 DOM 操作和活动的 watchers 数量巨大,设计不良的表单(能力越大,责任越大)造成了我们所说的 边界情况 ,所以我们需要从 Angular 的层面去解决一些问题。

在使用了多年 Angular 之后,第一次接触到 Vue,说实话,就像是呼吸到新鲜空气一般。此时,性能已经成为一个关键问题,Angular 的双向绑定不得不被质疑。Angular 原来是很神奇的,随着时间的推移颓势渐显,在某一时刻,魔法消失了

开始使用 Vue 是谨慎的。从 Angular 学到的经验起了作用。但意识到它们是完全不一样的东西并没有花费太长的时间。在语法上 Vue 跟 Angular 看起来很相似(很大程度上因为它使用 v-for, v-repeat, v-if, v-show, v-hide等)并且这是为了不重复造轮子 Vue 有意为之的,在这些方面,Vue做的也很好。

一旦发现区别,Angular 的处理方式就被我们遗弃,我们重新开始了,这就是 vuetiful 旅程 正式开始的地方。

因为 Vue 使用虚拟 DOM(很像 React)大多数关注点都在 bindings/watchers。跟 React 重新渲染整个子组件相比,Vue 通过只重新渲染改变的组件在优化 DOM 操作上甚至更快。

在这个新视角下,插件的重写是有趣和顺利的。第一个 Vue 项目已经顺利的运行了 4 个多月并且那些 边界情况 还没有出现。之前当处理大量数据时的性能问题真是一件抓狂的事。

但这只是一个实现具体工作的小插件。我们还没接触那些复杂的问题像路由,状态管理等。因为我们期待着使用 Vue,一个长期悬而未决的决定,在前端服务上使用 Vue 替换 Angular,已经通过了,并且已经挑选了其中一个平台使用 Vue 重写。

正式入坑之前,我们做了一个'hello world-ish'应用(使用 webpack + vue + vue-loader + vue-router + vuex)来确认计划实施的可行性。并没有花费太多的时间去理解和实现这些。我必须承认,在我试过的所有 JS 框架中,Vue拥有最为平缓的学习曲线。如果你不需要很多并且不必像 React 那么强大,那么你不需首先了解构建系统,JSX,ES2015等,它可以像使用 JQuery 一样简单。这个' hello world-ish'做起来很有趣,现在已然回不到 Angular 了。

开发进展足够顺利,但文档还需要完善,并且社区一直很棒。Vue Gitter channel 是一些牛人(都是无名英雄)组织的帮助大家解决问题的社区。我们第一个 Vue 前端项目上周发布了,到目前为止,我们只有好消息要汇报。它的表现让所有想要仍然使用 Angular 的人在计划着全部替换成 Vue。接下来会更多。

个人而言,我真的喜欢 Vue。 已经有的这些 JS 框架,它们都有各自的长处和短处,Vue 从它们当中获得了很多灵感,并且对许多已经存在的问题,给出了一个更好的解决方案。像数据绑定,Angular 使用脏检查来跟踪变化,这有一个显著的性能损失并且是性能问题的最大瓶颈,Vue 使用一个独立跟踪观察系统来跟踪变化和发现改变的组件。

感觉更流畅,限制更少。没有什么感觉被强迫,因为你总是知道你能使用其他的方式做任何想做的,并且你选择了满足需求的正确方法。举个例子,如果你想,你可以使用 React 的 Redux 替换 Vue 官方的状态管理库 Vuex。Vue 的组件系统简单的多,但跟 React 的 JSX 一样的强大。就像使用 Redux,Vue 也支持 JSX。但它并不强迫你。任何有效的 HTML 在 Vue 中都是有效的模板。所以你可以决定什么时候使用 HTML 标记,什么时候使用渲染功能。Vue 另一个做的好地方是组件级作用域的CSS。而不是使用复杂的 CSS-in-JS 方式,Vue 简单的使用一个作用域属性,通过给元素添加一个唯一的属性并绑定 CSS 到元素上来限定当前组件的 CSS 作用域。有太多喜欢 Vue 的地方,并且我仍然时常意识到并惊叹于 Vue 的处理方式。

最后我想说如果你计划开始一个新项目或者重写一个存在的,给 Vue 一个机会。希望对你来讲它是有趣的,就像带给我的那样,所以已经成为 Vue 布道者的我写了自己的第一篇博文!