首先,我们先了解什么是MVX框架模式?

MVX框架模式:MVC+MVP+MVVM

1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。

View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。

用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。

并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。

MVP模式的框架:Riot,js。

3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。

这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。

MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

Vue.js是什么?

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

其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下:

1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

Vue.js与其他框架的区别?

1.与AngularJS的区别

相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点:

1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

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

2.与React的区别

相同点:

React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

中心思想相同:一切都是组件,组件实例之间可以嵌套。

都提供合理的钩子函数,可以让开发者定制化地去处理需求。

都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。

不同点:

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

angular vue react web前端三大主流框架的对比的更多相关文章

  1. web前端三大主流框架的对比

    MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来 ...

  2. 前端三大主流框架的对比React、Vue、Angular

    前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的 ...

  3. Web前端三大主流框架是什么?Web前端前景与就业形势

    近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员.那么Web前端三大主流框架是什么呢? 一.We ...

  4. Python三大主流框架的对比

    相信做Python这一块的程序员都有听说这三个框架,就像神一样的存在,每一个框架的介绍我就不写出来了,感兴趣可以自己百度了解了解!下面我就说正事 Django:Python 界最全能的 web 开发框 ...

  5. 前端三大框架(Angular Vue React)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  6. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  7. Web前端三大框架_angular.js 6.0(二)

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

  8. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  9. 【 Linux 】三大主流软件负载均衡器对比(LVS、Nginx、HAproxy)

    三大主流软件负载均衡器对比(LVS.Nginx.HAproxy) (资料来自网络,做了部分的补充说明) LVS:    1. 抗负载能力强,性能高,能达到F5的60%,对内存和CPU资源消耗比较低   ...

随机推荐

  1. 回调函数: 一定要在函数名前加上 CALLBACK,否则有可能引起内存崩溃!

    今天又遇到一个莫名其妙的内存崩溃问题,问题代码 EnumChildWindows(...): EnumChildWindows(hwnd_panel_text_watermark, (WNDENUMP ...

  2. Linux:在文件最后一列添加递增数(awk,cat函数)

    假设有文件file1.txt: aa eeeee bb eeeee cc eeeee dd eeeee 先修改为: aa eeeee 1 bb eeeee 2 cc  eeeee3 dd eeeee ...

  3. IO处理要注意的事:关闭资源!关闭资源!关闭资源!

    案例1: 现象: 同事做本地txt数据切分然后处理,发现删除本地临时文件目录中的文件时,有时成功,有时删除完了发现文件还在.代码各处都不报错,且各种日志打印正常. 解决: 最后发现,是业务逻辑代码中有 ...

  4. jquery+ajax无刷新加载数据,新闻浏览更多

      <script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...

  5. 过滤富文本编辑器中的html元素和其他元素

    https://blog.csdn.net/fjssharpsword/article/details/53467079 1.应用场景:从一份html文件中或从String(是html内容)中提取纯文 ...

  6. 浏览器报XMLHttpRequest cannot loadxxxxxx

    解决方案 找到浏览器-----右击---属性---加 加上这一句就不会报错--allow-file-access-from-files 加上这一句就不会报错--allow-file-access-fr ...

  7. CodeForces5E 环转链,dp思想

    http://codeforces.com/problemset/problem/5/E 众所周知,在很久以前,在今天的 Berland 地区,居住着 Bindian 部落.他们的首都被 n 座山所环 ...

  8. mysql的使用

    数据库操作: 1)创建数据库和删除数据库 使用普通用户,你可能需要特定的权限来创建或者删除 MySQL 数据库,root用户拥有最高权限,可以使用 mysqladmin 命令来创建数据库: mysql ...

  9. jdk7 并行计算框架Fork/Join

    故名思义,拆分fork+合并join.jdk1.7整合Fork/Join,性能上有大大提升. 思想:充分利用多核CPU把计算拆分成多个子任务,并行计算,提高CPU利用率大大减少运算时间.有点像,Map ...

  10. Dubbo简易控制中心安装

    1. zookeeper安装(单机版):http://www.cnblogs.com/wangfajun/p/5251159.html  √ 2. dubbo管控台安装(zookeeper单机版):h ...