为什么 VueJs 会成为下一个热门话题——个人观点

免责声明：本文列出了一些激发我对 VueJs 兴趣的因素，我并不期望所有人都认同以下陈述。本文并非最佳前端框架/库的竞赛。以下文章源于我作为一名专业人士在 Angular、VueJs 和 React 方面的工作经验。欢迎在评论区发表您的想法，或许最终会得出一个更全面的结论。最后，我提到的 Angular 指的是 Angular 2+，而不是 AngularJs。

事实上，选择使用哪个库取决于哪些工具能够满足你每次的需求。作为一名专业人士，我曾使用过最流行的库（Angular、React 和 VueJs），我发现它们都同样出色，但我敢说 VueJs 是我最喜欢的。正如在很多文章中提到的，VueJs 是 React 和 Angular 的结合，我完全同意这一点——VueJs 实际上吸收了 Angular 和 React 最优秀的特性。

我在 Google 上搜索了一下，发现大多数博客都在讨论前端框架和库的流行度，比如图表、招聘信息、每个库的下载量等等。我会尽量用更实用的方式，列举 VueJs 从 Angular 和 React “借鉴” 的、我最喜欢的特性。长话短说，我们开始吧：

双向数据绑定

……或者叫“模型绑定”。广义上讲，双向数据绑定意味着对模型对象的任何更改都会影响 UI，反之亦然。我发现这个功能在代码维护和可读性方面非常方便。双向数据绑定在 VueJs 和 Angular 中使用，但在 React 中没有。在使用 React 时，你必须通过从事件处理程序调用函数来手动绑定更新——大多数情况下，这只不过是一个通过设置当前值来更新状态的 lambda 函数——但这仍然是一个问题，可以通过双向数据绑定功能来避免。

更容易集成到现有项目中

虽然这三种框架都能完全满足单页应用程序解决方案的需求，但也有一些情况，你只需要编写一段更优雅的 JavaScript 代码，而无需使用整个框架/库。我经常遇到的一个真实案例是，我想在遗留的多页应用程序（比如用 Razor 在 .NET MVC 中编写）中添加一些 AJAX 调用，并且不想使用对我来说已经“过时”的 JQuery。我并不是说 JQuery 不能胜任这项工作，但即使是纯 JavaScript 也能胜任。因此，既然我们正在向前发展，我认为更现代的解决方案可能会更有效。这就是 VueJs 和 React 占据主导地位的原因——在“非 VueJs”或“非 React”应用程序中包含一些 VueJs 或 React 代码非常容易。尽管 Angular 引入了Angular Elements，但在 Angular 应用程序之外应用它们仍然不是一种简单的方法。基本上，这是因为 Angular 是作为框架引入的，而 React 和 VueJs 是作为库引入的，所以这对于下一个列出的功能来说是一个很好的起点。

随发展而增长的方法 - 初始包大小

如前所述，Angular 是单页应用程序的完整解决方案，因此初始安装包（约）500KB 包含所有相关工具，例如路由器、HttpClient、内置表单验证、内置管道等。因此，无论您是否需要它们，Angular 都会默认安装。不过，VueJs 和 React（分别 80KB 和 100KB）提供了更高的灵活性/可扩展性。初始安装包的格式更为简洁，之后可以自行安装任何额外的包。因此，您一开始只会安装所需的工具，随着需求的增长，您可以扩展安装设置并添加更多工具。

功能和类组件

红葡萄酒，白葡萄酒……我猜想这个决定主要取决于每个开发人员的风格，甚至取决于团队约定的代码指南，但仍然如此。VueJs 和 React 提供了在函数式组件和类组件之间进行选择的选项，但 Angular 却没有。我并不是说使用哪种方式好或坏，但无论如何，Angular 都不支持这种程度的自由。在 Angular 中，唯一的选择就是类组件。

内置 API

按照之前的想法，这也是个人喜好的问题。比较 React 和 Angular，我发现 Angular 提供了大量的 API，这可能是好事也可能是坏事。Angular API 采用新语法涵盖了大量用例，而 React API 更简单并且依赖于较低级别（纯 javascript）。显然，这也会影响学习曲线。值得庆幸的是，VueJs 包含一个足够简单（可以快速适应）的 API，但不像 Angular 那么广泛。例如，VueJs 组件模板中的条件迭代可以通过v-forand v-if（在 Angular 中）等实现，而在 React 中我们必须使用更多纯 javascript 命令，如map*ngIf、扩展运算符等。但同样，这也是个人喜好的问题。*ngFor

关注点分离

关注点分离是专业编程的基本原则之一。将代码分成几部分，每个部分负责特定的操作，可以避免很多代码维护和可读性方面的问题。在 VueJS 和 Angular 中，组件将 HTML、JavaScript 和 CSS 放在不同的代码块中，这可能会提高代码的可读性，但可以肯定的是，它符合关注点分离原则。另一方面，React 引入了JSX 语法，它是 JavaScript 和 HTML 的混合体，因为它认为这两者之间存在一定的关联。

总而言之，库/框架没有好坏之分。选择适合我们情况的库/框架的第一步是深入思考具体需求。以上提到的三个工具（Angular、VueJs 和 React）均由经验丰富的开发人员构建，旨在帮助开发人员高效使用。不过，就我个人而言，出于上述原因，VueJs 是我最喜欢的工具。也欢迎您提出宝贵意见。

☕ 给我买杯咖啡