angular/vue/react优劣性对比分析

首先,我们先了解什么是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。

使用MVVM好处:

  1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  
  2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
  
  3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。  

  4. 可测试性。可以针对ViewModel来对界面(View)进行测试。可以针对ViewModel来对界面(View)进行测试
  
Vue.js是什么?

看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js的特性如下:

1.轻量级的框架,易用

2.双向数据绑定

3.指令化

4.组件化

1.与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的特性。

对于庞大的应用来说,这个优化差异还是比较明显的。

2.与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框架。

  • 7
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularVueReact 都是流行的前端框架,它们都具有一些共同的特点,如组件化、虚拟 DOM、响应式数据流等。但它们也有一些不同之处,如下所述: 1. AngularAngular 是一个完整的框架,提供了一整套工具和库,包括模块化、组件化、依赖注入、模板语法、路由管理、HTTP 请求等功能。它使用 TypeScript 作为主要开发语言,强制使用严格类型检查。Angular 的学习曲线较陡峭,但它的文档和工具非常完善,可以帮助开发者快速构建可维护、可扩展、高能的 Web 应用程序。 2. VueVue 是一个轻量级的框架,采用了类似 Angular 的组件化思想和类似 React 的虚拟 DOM 技术,但它的语法和模板更加简洁、易于理解。Vue 的学习曲线较为平缓,可以逐步学习,也可以通过 Vue-cli 等工具快速搭建项目。Vue 的社区和生态系统较为活跃,有很多插件和组件库可供使用。 3. ReactReact 是一个由 Facebook 开发的框架,采用了虚拟 DOM 和单向数据流的思想,可以帮助开发者构建高能的 Web 应用程序。React 的语法较为灵活,可以使用 JSX 或纯 JavaScript 编写组件,但它需要使用额外的库和工具来实现路由、状态管理等功能。React 的生态系统非常丰富,有很多第三方组件和插件可供使用。 总之,AngularVueReact 都有自己的优点和适用场景,开发者可以根据项目需求和个人喜好选择合适的框架。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值