将Vue.js与新的JavaScript框架相比较

随着前端设计对于一个应用程序的成功变得越来越重要，与最好的前端框架合作也变得更加必要。

找到最好的框架来解决项目中的具体问题，可以提供更好的前端设计和用户体验，帮助品牌和开发者吸引和保留更多的用户。

对于使用JavaScript的开发者来说，Vue已经成为一个流行的、成熟的框架。然而，不同的项目需要不同的解决方案，找到Vue的替代品可以推动项目前进，提高速度、性能和社区。

在这篇文章中，我们将把Vue与Svelte、Riot、Hyperapp和Alpine进行比较，这些新的、不太知名的JavaScript框架已经培养了一批粉丝，并提供了有用的功能。

Vue.js的快速概述

Vue是一个开源的JavaScript框架，它使用模型-视图-视图模型（MVVM）设计模式，在Vue应用程序中代表三个层次。

如果你熟悉流行的模型-视图-控制器（MVC）模式，Vue通过使用视图模型层执行控制器任务。

在Vue应用程序中，模型层提供对数据的访问。将数据从模型转移到视图，反之亦然的逻辑是由视图模型层负责的。

一个Vue模型可以是这样的。

var model_data = {
  js_frameworks: [‘Vue’, ‘Svelte’, ‘Riot’, ‘Hyperapp’, ‘Alpine’]
};

复制代码

视图模型层使用双向数据绑定来连接视图和模型层。在Vue中，一个视图模型对象可以被实例化，如下所示。

var vm = new Vue({ 
  el: ‘#app’,
  data: model_data
});

复制代码

请注意，el 参数使用元素的ID将视图模型层连接到我们视图中的任何元素。在这种情况下，我们将视图模型层绑定到一个ID属性值为app 的元素。然后，数据参数将视图模型层连接到模型上。

视图层由DOM和它的所有元素组成，向用户显示由模型层存放的数据。上面的模型和视图模型层对应的视图看起来像下面这样。

<div id=”app”>
  <ul>
    <li v-for=”framework in js_frameworks”>{{framework}}</li>
  </ul>
</div>

复制代码

上面最外层的div的ID与视图模型层中指定的ID相对应，在我们的视图中提供对模型中数据的访问。我们使用Vue的语法v-for ，创建一个for循环来循环浏览数据，并将其显示为一个列表。

现在我们已经熟悉了Vue和它的工作方式，让我们把它与一些新的JavaScript框架进行比较。

Vue.js vs. Svelte

比较框架时要考虑的一个共同特点是速度。在Vue与Svelte的案例中，看看每个框架是如何通过操作DOM来构建和运行一个应用程序的，就可以了解到这一点。

因为Vue通过虚拟DOM渲染应用程序的用户界面，增强的副本使操作它更容易。而这种方法虽然速度快，但在运行时进行编译会大大减慢加载过程。

然而，Svelte在构建时解决了这个性能问题。这个JavaScript框架以其速度和性能著称。它自带一个编译器，在应用上运行构建时将Svelte框架代码转换为vanilla JavaScript。

当完成一个应用程序的构建时，所有Svelte的痕迹都消失了，只剩下vanilla JavaScript。而且，由于浏览器能够理解JavaScript，所以不需要下载一个库，消除了原来花在下载上的时间。

与Vue不同，Svelte直接对DOM进行修改。另外，只有vanilla JavaScript代码的包通常比带有库的包更轻。

所有这些方面共同作用于提高整体性能。

虽然Vue和Svelte都有一个简单易懂的语法，但Svelte在实现不同功能时需要的代码略少。

与使用MVVM设计模式的Vue相比，Svelte也完全抛弃了设计模式。相反，Svelte创建了封装的组件，所有的HTML、CSS和JavaScript都在同一个页面。

<script>
  let name = "Samson";
</script>

<main>

  <input bind:value="{name}" />
  <p>My name is {name}.</p>

</main>

<style>
  p {
    color: red;
  }
</style>

复制代码

在上面的JavaScript代码中，我们创建了一个持有字符串的变量。在HTML中，一个输入框和段落是通过使用bind 属性的双向数据绑定来连接的。

代码给了我们一个文本框，里面有name 所容纳的文本。它也将文本插入到文本框下面的段落中。

如果我们改变文本框中的值，name 中的值和插入段落中的值就会改变。在我们的样式中，我们把段落文本的颜色定为红色。

虽然有些人喜欢Svelte将代码、标记和样式放在一个地方的简单方法，但它经常会被认为是老式的，根据项目的不同，Vue的现代MVVM设计模式可能更受欢迎。

当涉及到社区、用户群和支持时，Vue确实占了上风。由于Svelte的生态系统仍在成长，其用户没有Vue开发者所享有的资源、开源工具、插件和社区支持。

总的来说，这两个框架都被认为很容易学习，都有很好的文档，而且只需要有基本的JavaScript知识就可以采用。

然而，与Vue相比，Svelte的功能无缝衔接，提高了性能，加载时间更短，内存空间更大，整体更轻。

Vue.js vs. Riot.js

Riot.js为自己是一个轻量级和简单的UI库而自豪，它可以帮助开发者在为他们的应用程序创建优雅的UI时一蹴而就。

与React很相似，用户可以在Riot中创建自定义标签。这是该库的卖点之一，因为开发者可以。

• 用HTML和JavaScript创建头像、导航条、按钮和卡片等组件
• 将组件包裹在可以唯一命名的元素中，以提高可读性
• 无限地重复使用这些组件

使用Riot的另一个好处是它的尺寸。它宣传自己是一个简约的框架，提供创建一个前端项目所需的最低限度。由于这个框架与Vue相比功能较少，所以需要学习的东西也较少，而且在浏览器中加载速度也很快。

Riot使用模型-视图-展示者（MVP）模式，而不是Vue使用的MVVM模式。模型和视图的工作方式与Vue的模型和视图类似，但是，Riot使用一个presenter层来代替视图模型层，将数据从模型传输到视图，反之亦然。

Vue和Riot的一个主要区别是，Vue使用虚拟DOM来渲染应用程序的用户界面，而Riot采用表达式绑定，类似于AngularJS。这意味着每次对代码进行修改时，它都会进入DOM树并更新节点。

表达式绑定对于中小型应用来说是有益的，但对于大型应用来说会造成性能问题。

然而，Vue比Riot有一个很大的优势就是它的社区。Riot还没有被广泛采用，而Vue已经被更多的主流公司和开发者采用。

Vue.js vs. Hyperapp

Hyperapp是一个用于创建应用程序前台的超轻量级框架。它的总大小约为1KB，与Vue相比，它的启动速度更快，所需内存更少，当应用程序在低端设备上运行时，这一优势就凸显出来。

这些框架之间的一个相似之处是，它们都使用了一个虚拟DOM。

如果你正在构建一个复杂的应用程序，Vue强大的内置功能和社区将为你提供最佳服务。然而，如果你正在寻找一个以简单的API为优先的框架，你应该尝试一下Hyperapp。

与React类似，Hyperapp支持JSX，允许开发者创建可重复使用的组件，以便与其他框架一起使用。注意，在Hyperapp中使用JSX时，你必须用编译器将JSX代码转换成函数调用，因为浏览器不能解释JSX。

与Vue相比，Hyperapp的简单性使其易于采用。它鼓励不变性，比Vue提倡的可变性更不容易出错。

像我们到目前为止所看到的其他框架一样，Hyperapp并不是很流行。然而，它的小型社区积极致力于改进该框架。在写这篇文章的时候，Hyperapp还没有一个网站，它的文档也不如Vue的详细。要了解更多关于Hyperapp的工作原理，请查看其创建者开发的这个简单的教程。

Vue.js vs. Alpine.js

使用Alpine开始构建一个项目很容易。不需要安装，你只需要在项目中包含它的库就可以开始使用它。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

复制代码

没有必要使用复杂的构建工具、捆绑器和包管理器。

虽然Vue也为开发者提供了一个CDN，但用户不能使用单文件组件。对于大尺寸的Vue应用，建议通过npm来安装它。

Alpine的一个巨大优势是它是轻量级的，使得用户不太可能遇到任何速度和性能问题。它在很大程度上受到Tailwind CSS的启发，因为用户可以使用类在HTML标记上直接使用JavaScript。

Alpine也比jQuery新，所以它对DOM的操作方法更现代。与Vue的虚拟DOM不同，Alpine在构建应用程序时可以直接对真实的DOM进行修改。

在语法方面，Alpine与Vue非常相似–这是其创建者Caleb Porzio有意为之的。该语法带有14个指令，可以将JavaScript撒到HTML中。

x-data
x-init
x-show
x-bind
x-on
x-if
x-for
x-model
x-text
x-html
x-ref
x-transition
x-spread
x-cloak

复制代码

请看本指南，了解如何使用这些Alpine指令。

对于Vue过于繁重的项目来说，Alpine是一个完美的选择，比如只需要几个功能的简单应用。

总结

我们已经仔细研究了一些新的JavaScript框架，这些框架发展迅速，有一天可能会对Vue这样的成熟框架构成强有力的竞争。

需要注意的是，写这篇文章并不是为了介绍任何比Vue更好的框架，而是为了让读者了解一些鲜为人知的框架，这些框架可能会满足不同的需求，比如轻便和简单。

看看这些新的框架，并在随后的项目中尝试使用它们，看看它们带来的第一手优势。

The postComparing Vue.js to new JavaScript frameworksappeared first onLogRocket Blog.