Vue Angular React 全面对比,我们该选谁?
推荐使用:Vue.js > ReactJS > Angular 2 > AngularJS
概要:
现在, Vue 还没有 React (由 Facebook 维护) 或者 Angular 2 (受到 Google 的支持) 流行。不过,许多开发者都已经转向 Vue 了。Laravel 社区也在考虑将它作为可选用的前端框架之一。
总之,Vue 给 React & Angular 的弊病提供了一道良方,为你提供了一种更加简单和轻松的方法来编写代码。
满意度对比:
Hacker News (https://news.ycombinator.com/item?id=15999688)
前端框架 / 满意度 | 2016 | 2017 |
React | 91% | 93% |
Vue | 91% | 91% |
Angular 2 | 65% | 66% |
Angular | 40% | 33% |
1.首先,我们先了解什么是MVX框架模式?
MVX框架模式:MVC+MVP+MVVM
1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。
2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。
3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
2.使用MVVM好处:
1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
4. 可试性。可以针对ViewModel来对界面(View)进行测试。可以针对ViewModel来对界面(View)进行测试
3.Vue.js是什么?
看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js的特性如下:
1.轻量级的框架,易用
2.双向数据绑定
3.指令化
4.组件化
4.与angularjs的区别
相同点:
都支持指令:内置指令和自定义指令。
都支持过滤器:内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点:
1.更简单易用
AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。
2. 更灵活
比起 Angular更少专制,它能然你按照自己想要的方式构建应用,而非凡事非得 Angular 框架必须如此如此
3.性能更突出
AngularJS依赖对数据做脏检查,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所
有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要
运行多次。
Vue依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖
关系。唯一需要做的优化是在 v-for 上使用 track-by。做甚是2.0吸取的react的虚拟DOM的特性。
对于庞大的应用来说,这个优化差异还是比较明显的。
5.与React的区别
相同点:
react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,
两者都需要编译后使用。
中心思想相同:一切都是组件,组件实例之间可以嵌套。
都提供合理的钩子函数,可以让开发者定制化地去处理需求。
都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点:
1.性能更好:
Vue性能上更有优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些,整体大小比react.js更小更轻便
2.更易学更简单:
react.JS 彩用SX语法,对语大部分工程师入手比较困难,需要要大量的时间去学习适应这种新语法的形式,vue采用DOM模板的方法,易看易用
3.优化更好:
在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。 然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的负担。
Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。
综上所述,在VUE.20更新以后。它更是吸取了 React 和 Angular 的教训,同时也吸收了它们的成功之处。我们看到的 Vue.js 是轻量级且容易学习掌握的新型mvvm框架。
Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。