VueJs与ReactJS和AngularJS的异同点

2020-06-16 06:04:25易采站长站整理

工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。

在 Vue 中,由于有时需要用这些功能,Vue也提供了渲染功能 并且支持了 JSX。然而,对于大多数组件来说,渲染功能是不推荐使用了。
在这方面,Vue提供的是更简单的模板:


<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>

优点如下:

在写模板的过程中,样式风格已定并涉及更少的功能实现。
模板总是会被声明的。
模板中任何 HTML 语法都是有效的。
阅读起来更贴合英语(比如,for each item in items)。
不需要高级版本的 JavaScript 语法,来增加可读性。
这还没有结束。Vue 拥抱 HTML,而不是用 JavaScript 去重塑它。在模板内,Vue 也允许你用预处理器比如 Pug(原名 Jade)


div.list-container
ul(v-if="items.length")
li(v-for="item in items") {{ item.name }}
p(v-else) No items found.

Angular && Vue

Vue 的一些语法和 Angular 的很相似(例如 v-if vs ng-if)。据Vue开发者说因为 Angular 是 Vue 早期开发的灵感来源。然而,Augular 中存在的许多问题,在 Vue 中已经得到解决

复杂性

在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多,因此你可以快速地掌握它的全部特性并投入开发。

灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。
这也就是为什么我们提供 Webpack template,让你可以用几分钟,去选择是否启用高级特性,比如热模块加载、linting、CSS 提取等等。

数据绑定

Angular 1 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

指令与组件

在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。

性能

Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。

在 Angular 1 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。