简单描述 vue 和其他框架的区别

4,719 阅读8分钟

现在vue已经是前端主流的框架了,采用MVVM模式,虚拟dom,diff算法,数据双向绑定,提供响应式和组件化的视图组件。将注意力集中保持在核心库。体积小,性能好,生态系统庞大,发展也很不错。相对应的还有React,Angular,Riot,Ember等框架,那么为什么要推荐使用vue呢,他较于其他框架优点是什么呢? 更强大的React跟他有什么区别呢?

vue

vue的优点:

  1. Vue学习简单, API简单,模式拥抱传统的web,入手快,适合快速开发
  2. 社区 和官网都在更新发展相对于的功能,React的JSX,Angular的TS等都可以支持,Angular的watcher慢等问题在vue中都得到了相应的解决
  3. 性能更好,体积更小
  4. 构建工具webpack等有默认配置,可以让你专注于应用,但同时又很灵活,可以根据你的需求配置
  5. 基于依赖追踪的观察系统并且异步队列更新,所有数据变化都是独立触发的,除非他们之间有明确的依赖关系
  6. 组件指令,生命周期,数据流都更清楚
  7. 在普通js对象上建立响应,提供自动化计算属性

和React比较

  • 某个组件状态发生变化时,以该组件为根,重新渲染整个组件子树,(而vue会自动追踪)
  • css 也在JSX中,vue的模板形式比jsx读写起来更自然,提高开发效率,因为你更熟悉传统的web写法。而且vue的v-on等修饰符的功能React需要很多代码实现
  • React 学习更陡峭,vue的路由库和状态管理库都是由官方维护支持于核心库同步更新的,而React则给社区维护,生态系统相对分散,但是React的生态更繁荣。

和Angular.js比较

  • 复杂性: VUE在api与设计上更简单,可以快速学习并投入开发
  • 灵活性和模块化:Vue有vuecli可以快速构建。配置默认,不需要花费太多的时间在配置上,你可以专注于应用本身。同时提供了根据实际需求调整每个工具配置的灵活性,
  • 数据绑定:Vue在不同组件内强制使用单向数据流,这使得数据流更加清晰易懂
  • 指令和组件:vue的指令和组件分的更清晰

和Polymer比较

  • 需要重量级别的polyfills来帮助,性能下降
  • 浏览器本身不支持这些功能
  • computed方法不灵活

和Rnockout比较

  • vue只能支持到IE9,(但是他可以支持到IE6)
  • 发展缓慢,略显老旧,系统缺少完备的生命周期事件方法
  • 接口设计理念不同

和Ember相比较

  • vue在普通js对象上建立响应,提供自动化计算属性,(而Ember是在Ember对象上手工为计算属性声明依赖)
  • vue的模板语法可以用全功能的js表达式,(而handlebars的语法和帮助函数很受限)
  • 性能上,vue比ember好很多,vue能自动批量更新,(而Ember需手动管理)

和Riot比较

  • vue性能更好(riot使用遍历DOM树)
  • vue有更多的成熟工具支持比如webpack,(riot构建靠社区)

大白话就是:

vue 和其他框架相比较

  1. React:规模上学习曲线陡峭,性能上需手动实现方法避免不必要的子组件的渲染,HTML上要使用JSX 不如传统的HTML,CSS入手快,甚至现在css都要在jsx中。对新手或者想要快速开发一个项目的人员不友好,还要去学习JSX,想把原来项目迁移成新库的话也不是很友好。而且vue中的v-on等指令在react中需要大量代码实现。React的跨平台很强大,但是vue现在也有和Weex合作,vue也支持JSX快速构建项目等React有的功能。
  2. Angular1:API复杂,灵活度不如VUE,指令组件划分不清晰,watcher多时性能越来越差
  3. Angular2:学习成本大,必须要用TS,体积要比vue大,中小型项目不需要,不能快速的开发项目,要先学习
  4. Rnockout 发展缓慢
  5. Ember需要手动
  6. Riot 构建工具不行
  7. Polymer需要额外的工具,computed方法不灵活

下面是各个框架详细的介绍

一、React

1. 运行时性能

Vue应用中, 组件的依赖是在渲染过程中自动追踪的,所以系统精准的知道哪个组件确实需要被重新渲染,而React对于不必要重渲染的子组件时需要手动实现shouldComponentUpdate方法

2. HTML&&css

css也用JSX处理,并不是每个开发者都喜欢,vue也支持JSX,迁移的话vue更贴合传统的写法,这样新人参与更快

3. 规模

React 学习更陡峭,vue的路由库和状态管理库都是由官方维护支持于核心库同步更新的,而React则给社区维护,生态系统相对分散,但是React的生态更繁荣。 React的create-react-app 有一些局限性

4. 原生渲染

React Native 能同时跨多平台开发。vue 在和weex(阿里)合作,但成熟度不如weex

5. MobX

Mbox+react 月等于Vue

6. Preact 和其他类React库

类 React 的库们往往尽可能地与 React 共享 API和生态。但生态更小。因为这些库无法 100% 兼容 React生态中的全部,部分工具和辅助库也可能无法使用。或者即使看上去能工作,但也有可能随时发生不兼容,除非你用的这个类 React 库官方与 React 保持严格一致。

二、AngularJS(Angular1)

2009年诞生的JS框架,后被谷歌收购。核心功能:MVC,模块化,自动化双向数据绑定,语义化标签,依赖注入等。是以一个js文件形式发布的,可以通过script标签添加到网页中,vue早起开发的灵感来源

1.指令和组件

每件事情都是指令来做的,组件只是一种特殊的指令.vue 中指令和组件分的更清楚,指令只封装DOM操作,而组件代表一个自给自足的独立单元

2.灵活性

Angular必须遵守指定的规则,灵活性差

3.复杂性

API和设计比VUE复杂一些

4.运行时性能

watcher越多,就越慢,因为作用域内每一次变化,所有的watch都要重新计算。并且如果一些watcher触发另一个更新,脏检查循环可能要运行多次,要用深奥的技术,解决脏检查循环的问题,有时没有简单的办法来优化有大量watcher的作用域

三、Angular(Angular2)

1.TS

必须用TypeScript开发,在中小型项目中,TS并不是所有人都想用的。而Vue可以用也可以不用

2.运行时性能

运行时候性能都很快

3.体积

虽然体积在使用了tree-shanking和AOT后已经减小了许多, 但是还是比vue大

4.灵活性

Vue更灵活

5.学习曲线

学习曲线陡峭,API很大,要理解很多概念才能有效的工作。
设计目标是针对大型的复杂应用,但是这样对一些经验不丰富的开发者非常的不友好


以下都是一些小众的框架

四、Polymer.js:

谷歌2013年发布的一个新的webUI框架。和vue比较相似,vue的灵感来源之一

缺点
- computed方法的实现不灵活
- 基于web components 标准之上,需要重量级的polyfills来帮助工作,那么性能就会下降
- 浏览器本身不支持这些功能,而vue支持IE9的情况下不需要依赖polyfills来工作

五、Knockout.js

微软出版的MVVM模型领域内的先驱,兼容IE6,核心功能:属性监控和依赖追踪,声明式绑定, 模板机制

缺点:
- 发展缓慢
- 缺少完备的生命周期事件

六、Riot.js

MVP(模型-视图-呈现)开源客户端框架,特点体积小,不足1kb,但可以构建大规模的web应用程序,现在是Riot3.8版本,已经趋于稳定,可以用在生产环境

缺点:
- 国内相关资料很少,所以更适合定制化比较高的项目
- 微型场景更适合Riot,不想要太多的外部依赖,又需要组件化,数据驱动等现代化框架的能力
- 好用的Riot构建工具并不多

七、Ember.js

是一个MVC模式的开源的js客户端框架,2011年12月发布,属于社区开发者,文档很友好,ember-cli快速构建,提供了大量的约定,只要按照约定,就会变得非常高效

缺点:
- 学习成本大,而且并不灵活
- 页面渲染慢
- 框架体积大