推荐使用: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。
推荐使用:Vue.js ReactJS Angular 2 AngularJS相关推荐
- 前端三大主流框架React、Vue.js、Angular的优缺点分析
对于一个前端人员来说,熟练掌握框架可以大大提高开发效率,同时框架也是他们与企业谈判薪资的底气.很多学习前端的人在完成对基础知识的掌握之后都要学习框架,接下来就给大家讲解三大主流框架React.Vue. ...
- 推荐一些vue.js热门好用的框架组件
说明:推荐一些好用vue的ui框架组件 描述:仅仅作为学习和整理,具体按照个人的需要选择使用即可,可以收藏,方便后续选择备忘. 一.mint-ui 基于 Vue.js 的移动端组件库 介绍:一款基于 ...
- 为Angular(2+)开发人员提供带TypeScript的Vue.js
目录 介绍 单页应用程序的演变(SPA) 三大框架概述 Angular开发者的Vue.js 学习Vue.js Vue.js页面的剖析 构建示例应用程序 TypeScript的案例 入门--Vue.js ...
- Prettier 1.15代码格式化工具新增Angular和Vue.js支持
Prettier 1.15代码格式化工具新增HTML.Vue.js.Angular.MDX支持以及多项语法优化和改进. 对于Angular和Vue,Prettier现在可以格式化这些扩展HTML的框架 ...
- [译] State of Vue.js report 2017 中文版
原文链接:https://www.monterail.com/state-of-vuejs-report 译文出自:掘金翻译计划 Event Organizer:leviding Translater ...
- State of Vue.js report 2017 中文版
转载自:https://juejin.im/post/5a138fae5188254d28732899 原文链接:www.monterail.com/state-of-vu- 译文出自:掘金翻译计划 ...
- # 代码约架?Vue.js和Binding.scala两大框架作者的PK
作为一个知乎小透明,最近看了一场炸鱼大片.两天前,民工叔因为 Teambition 是 React 技术栈而离职 一文,引发了激烈的讨论.其中民工叔偏向的技术选型Vue.js的作者出没现场黑了一把An ...
- 前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践 基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...
- Vue.js 核心精要实战解析
课程简介 前端框架领域,Angular.React.Vue.js 三足鼎立,而 Vue.js 因其性能.通用.易用.体积.学习成本低等特点深受广大前端们的追捧,并吸引了一大批前端初学者.作为 Vue. ...
最新文章
- Citrix Receiver For Linux 预览版
- 用gdb调试mpi程序的一些心得
- LeetCode Algorithm 面试题 16.10. 生存人数
- SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍
- CF1110E-Magic Stones【结论题,差分】
- JDBC——编程式事务的实现逻辑
- redis——redis主从复制
- 业务、架构、技术,我们应该关注什么 Java和.Net的优势劣势简单看法 市场经济决定,商业之道即是软件之道,市场的需求决定着软件技术的发展 利益决定着选择应用新技术...
- visio用例图箭头怎么画_解析用Visio画UML用例图简明步骤
- OA系统中的会议管理
- 笔记本计算机摄像头怎么打开,笔记本电脑的摄像头在哪里打开(图解摄像头开启步骤)...
- u盘数据恢复软件哪个好?怎么恢复u盘数据?
- 论文阅读 视频生成(vid2vid) || Few-shot Video-to-Video Synthesis
- 半实物仿真技术在复杂控制系统研发过程中的典型应用
- html中颜色打字机效果,基于Css3和JQuery实现打字机效果
- HBuiilderX代码美化插件format(即js-beautify)配置文件
- 浅谈 2020 年诺贝尔化学奖:通向未来的基因编辑
- Elasticsearch JestClient 使用
- c#调用目标检测模型
- 三次多项式的因式分解
热门文章
- matlab绘制三维图形
- 关于springMVC传参问题
- svn在linux下的使用(svn命令行)ubuntu 删除 新增 添加 提交 状态查询 恢复
- [hackinglab][CTF][上传关][2020] hackinglab 上传关 writeup
- wordpress 外部数据接口_使用接口方式获取WordPress用户信息的方法
- kafka分区与分组原理_kafka 基本原理和概念
- 1644E. Expand the Path
- 万丰科技机器人排名_2020年全国机器人企业数量大排名(省份榜|9月)
- dedecms模版php,dedecms专题模板怎么用
- python opencv报错_OpenCV in Python 入门问题,python报错
-问答-阿里云开发者社区-阿里云...