从 Angular 到 Vue：再次感觉自己像个初学者

更新（2018 年 10 月 30 日）：写完这篇文章几天后，我已经对 Vue 及其生态系统有了很好的了解。感谢所有分享 Vue 有用资源的人；这给了我很大的帮助！

过去一年左右，我参与了几个 Web 项目。现在，我能够轻松自如地运用一些精选的技术，并高效地完成工作。在前端开发领域，这意味着Angular。说实话，它让我感觉很棒。

然而，我发现自己开始固步自封，甚至感到无聊。于是，我开始学习Vue。

在这篇短文中，我将揭露我在使用 Angular 一年之后学习 Vue的过程中的心态、目前遇到的困难以及我如何应对这些困难。

我们是如何到达那里的？

最近我频繁使用 Angular。Angular 是我学习的第一个现代 Web 框架，我已经构建了至少三四个不同规模的应用。同时，我也学习了大量关于渐进式 Web 应用和服务端渲染等现代概念的知识。

但有一个问题。每次我有机会为新项目选择前端框架时，我都会选择 Angular。为什么？很简单，因为它是我唯一了解并且用起来感觉舒服的框架。

然而，在我做出决定之后，一个小小的声音立刻潜入我的脑海，低语道：“又是 Angular？嗯……”。

别误会我的意思——能够精通一门技术，不用看文档就能构建一整套系统，这确实让我感到很自豪。

没有必要对每一个前端框架都了如指掌——因为前端框架太多了，而且专业化也有其优势。

但对我来说，有一个问题：

挑战在哪里？困难在哪里？还有什么需要学习？

你看，我确实喜欢学习新事物。我不太喜欢那种像个初学者的感觉——那种感觉很不舒服——但我总是喜欢最终的结果：我能做到以前做不到的事情，这很令人兴奋。

这就是促使我尝试其他事情的动力。另外，一些情况也起了作用。

抓住机会

几周前，我接手了一个重要的学校项目。我们有机会在 Angular 和 Vue 之间做出选择。

我对 Vue 了解不多——只是偶尔读读书，大概一年前做过一个玩具项目。如果选择 Angular 会容易得多，因为我已经积累了丰富的经验和专业知识。

但你猜怎么着？我们选择了 Vue。

有时，离开舒适区就像问一句“为什么不呢？”一样简单。

这并不容易

我今天才开始潜水，让我告诉你——我很兴奋，但现在感觉很不舒服。

其实，我感觉很沮丧。我得重新学习所有东西。为什么它们看起来那么相似，却又那么不同？我觉得自己像个大师，但现在却完全是个菜鸟。真是的。

因此，在这个新的、未知的生态系统中，我需要一个生存策略，以免被看似大量的新知识淹没。

以你所知道的知识为基础

幸运的是，我现在对前端开发的世界比第一次尝试 Vue 时有了更深入的了解。很多事情已经解决了，我可以专注于框架及其生态系统。（而且，Vue 已经成熟了很多，这真是个好消息。）

很自然地，我寻找的是熟悉的东西。我已经注意到：

• Angular 和 Vue 都是组件驱动的——太棒了！
• 两者都有CLI — 太棒了！（但我怀念ng generate）
• 两者都有一个基于指令的模板系统——太棒了！
• @Input()两者都通过输入（ vs @Prop()）和输出/事件（@Output()vs. $emit()）实现双向数据绑定— — 太棒了！
• 模板语法非常相似：*ngForbecomes v-for、[foo]="bar"becomes:foo="bar"等等 — — 非常棒！
• 两者都有广泛而精确的文档，以及充满活力的社区——太棒了！
• 我也可以在 Vue 中使用TypeScript了——太棒了！🎉
• 我一直在研究 Angular Material，似乎还有更多的 Vue 组件框架，比如Vuetify——太棒了！

至少，这不是冷启动。确实有很多方面我可以联系和比较。呼！

识别差异

然而，我不禁注意到了巨大的差异：

• Vue 组件是单文件的，而 Angular 则将 HTML、CSS 和 TypeScript 分别放在各自的文件中。（我可能很快就会习惯的。）
• Vue 专注于视图层，而 Angular 则包含电池：我的爱人Router和它在哪里HttpClient？！
• Vue 没有模块，而是有一些其他概念，例如 mixins、filters 和 transitions。
• 没有服务的概念——我该如何从组件中抽象出逻辑？这在 Vue 的理念里算什么？
• 如果没有服务，那么状态管理怎么办？即使是小型应用，我也必须使用 Redux/Flux 之类的方案吗？
• 我的 s 在哪里Observable？我花了好多时间才了解它们。我应该用什么来代替RxJS呢？

所有这些差异让我普遍感觉到Vue 对开发人员的要求要低得多。

作为具有 Angular 背景的人，我发现这有点令人生畏。

Angular 的约定和工作方式让人感觉很安全。它们也促进了与其他开发者的合作——因为我们都分享了相同的实践。Vue 会怎么样？每个人的工作流程都不一样吗？

寻找最佳实践和流行的解决方案

那么我还剩下什么呢？有些东西看起来很熟悉，有些东西看起来更好（毕竟单文件组件看起来相当漂亮），但也有一些东西我怀念。所以我正在寻找替代品。

以HTTP 请求为例：我见过的两个流行解决方案是axios和vue-resource。看起来是 的不错替代品HttpClient。

路由问题也得到了解决——Vue 中没有内置插件Router，但vue-router是一个标准插件，甚至在通过 Vue CLI 创建新项目时也会建议使用。

那么，状态管理怎么样？Angular 有服务，而且我很幸运，当数据绑定不够用时，我可以使用服务来存储一些共享状态。

Vue 没有服务的概念，那还有什么呢？一个流行的选择似乎是vuex，一个受 Flux 启发的状态管理 Vue 插件。我之前听说过状态管理（虽然主要是通过 Redux——参见理解 Redux），所以我很想深入研究一下，看看结果如何。我只是希望这不会成为太大的负担。

最后——RxJS 和事件流。这可能是我在 Angular 中最喜欢的功能了。可观察对象让事件流的使用变得非常愉快且易于维护。

嗯，我还没找到替代品。我猜——不会有。其实，我觉得 Vue 应该不会妨碍我，我可以用 RxJS，不过好像 Vue 已经有很多内置功能来确保响应性——这一点我也觉得挺让人兴奋的。我们拭目以待吧！

享受旅程

我以前觉得自己对 Angular 很了解，但 Vue 却让我回到了初学者的状态。这很不容易，而且感觉非常不舒服。

但是——这是给所有努力奋斗的初学者的一个信息——经验也告诉我，这段旅程是值得的。

最终，你会学到另一项技术，并能够做到以前做不到的事情。这可能需要几周甚至几个月的时间，但它终将实现，而你会为此感到自豪。💪

至于我，我暂时不会放弃 Angular，但我很期待学习更多关于 Vue 的知识。我将专注于构建一个Vue 中所有组件如何协同工作的思维模型。我期待着有一天一切“豁然开朗”——因为没有什么比突破自我、学习新事物更令人兴奋的了。💻

你之前也遇到过这种情况吗？你是如何应对需要重新学习一切的？我很想听听你的想法！

保持联系！

如果您喜欢这篇文章，您可以在 Twitter 上找到我，了解更新、公告和新闻。🐤