VueJs与ReactJS和AngularJS的异同点


Posted in Javascript onDecember 12, 2016

React && Vue

React 和 Vue 有许多相似之处,它们都有:

  • 使用 Virtual DOM
  • 提供了响应式(Reactive)和组件化(Composable)的视图组件。
  • 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。

由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要指出 React 比 Vue 更好的地方,像是他们的生态系统和丰富的自定义渲染器。

React && Vue的性能

渲染性能

在渲染用户界面的时候,DOM 的操作成本是最高的,不幸的是没有库可以让这些原始操作变得更快。
我们能做到的最好效果就是(来源google):

Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.

Add as little overhead (pure JavaScript computations) as possible on top of those DOM manipulations. This is an area where Vue and React differ.

The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilizes Virtual DOM to achieve that, but Vue's Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React's.

更新性能

In React, when a component's state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.

To avoid unnecessary re-renders of child components, you need to implement shouldComponentUpdate everywhere and use immutable data structures. In Vue, a component's dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

也就是说,未经优化的 Vue 相比未经优化的 React 要快的多。由于 Vue 改进过渲染性能,甚至全面优化过的 React 通常也会慢于开箱即用的 Vue。

JSX vs Templates

在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。

render () {
  let { items } = this.props
  let children
  if ( items.length > 0 ) {
    children = (
      <ul>
        {items.map( item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    )
  } else {
    children = <p>No items found.</p>
  }
  return (
    <div className = 'list-container'>
      {children}
    </div>
  )
}

JSX 的渲染功能有下面这些优势:

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。
工具对 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 的作用域。

Vue 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。

有意思的是,Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现自定义下拉列表
Jan 05 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
Express框架之connect-flash详解
May 31 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python创建日历实例
2014/08/21 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python中模块string.py详解
2017/03/12 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python中super函数的用法
2017/11/17 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
军训自我鉴定范文
2014/02/13 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
意向协议书范本
2014/04/23 职场文书
政风行风评议心得体会
2014/10/21 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
python游戏开发之pygame实现接球小游戏
2022/04/22 Python