推荐使用: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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PWN-PRACTICE-BUUCTF-20

PWN-PRACTICE-BUUCTF-20actf_2019_babystackpicoctf_2018_can_you_gets_mepicoctf_2018_got_shellmrctf2020_easy_equationactf_2019_babystack 两次栈迁移 # -*- coding:utf-8 -*- from pwn import * #context.log_level"debug" #ioprocess("./ACTF_2019_bab…

C#.NET Thread多线程并发编程学习与常见面试题解析-1、Thread使用与控制基础

前言:因为平时挺少用到多线程的,写游戏时都在用协程,至于协程那是另一个话题了,除了第一次学习多线程时和以前某个小项目有过就挺少有接触了,最近准备面试又怕被问的深入,所以就赶紧补补多线程基础。网上已…

PWN-PRACTICE-BUUCTF-21

PWN-PRACTICE-BUUCTF-21wdb_2018_2nd_easyfmtciscn_2019_es_1axb_2019_fmt64x_ctf_b0verfl0wwdb_2018_2nd_easyfmt 格式化字符串漏洞 第一次printf通过printf_got将printf的实际地址打印出来,计算libc基地址,得到system的实际地址 第二次printf通过prin…

OpenCR arduino problem list

OpenCR arduino problem list 1、安装 直接使用arduino boardmanager安装,下载很慢,几乎不能成功安装。借鉴http://www.rosclub.cn/post-1037.html,下载需要组件,成功安装。 需要组件opencr_core、opencr_tools、gcc-arm-none-ea…

PWN-PRACTICE-BUUCTF-22

PWN-PRACTICE-BUUCTF-22hitcontraining_unlinkpicoctf_2018_leak_mesuctf_2018_basic pwnaxb_2019_brop64hitcontraining_unlink unlink,参考:[BUUCTF]PWN——hitcontraining_unlink # -*- coding:utf-8 -*- from pwn import * #ioprocess("./bam…

javaee, javaweb和javase的区别以及各自的知识体系

JavaSE Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的 Java 应用程序。Java SE 包含了支持 Java Web 服务开发的类,并为 Java Platform,Enterprise Edition(Java EE)提供基础。 JavaE…

PWN-PRACTICE-BUUCTF-23

PWN-PRACTICE-BUUCTF-23gyctf_2020_some_thing_excetingaxb_2019_heap[极客大挑战 2019]Not Badinndy_echogyctf_2020_some_thing_exceting 程序读取了flag到bss段上的0x6020A8地址处 存在uaf漏洞,利用fastbins的LIFO原则,create大小合适的chunk并free …

.NET 实现并行的几种方式(三)

在前两篇随笔中,先后介绍了 Thread 、ThreadPool 、IAsyncResult (即 APM系列) 、Task 、TPL (Task Parallel Library)。 写到这些笔者突然意识到 还有一个EMP系列没有写,在这里补充一下: 六、 EAP 、EAP中的典型代表是 WebClient: EAP系…

PWN-PRACTICE-BUUCTF-24

PWN-PRACTICE-BUUCTF-24cmcc_pwnme1wdb2018_guessoneshot_tjctf_2016gyctf_2020_forcecmcc_pwnme1 栈溢出,ret2libc # -*- coding:utf-8 -*- from pwn import * #context.log_level"debug" ioremote("node4.buuoj.cn",27883) elfELF("./…

.NET异步编程之新利器——Task与Await、Async

一. FrameWork 4.0之前的线程世界     在.NET FrameWork 4.0之前,如果我们使用线程。一般有以下几种方式: 使用System.Threading.Thread 类,调用实例方法Start()开启一个新线程,调用Abort()方法来提前终止线程。使用System.T…

对比MS Test与NUnit Test框架

前言: 项目中进行Unit Test时,肯定会用到框架,因为这样能够更快捷、方便的进行测试。 .Net环境下的测试框架非常多,在这里只是对MS Test和NUnit Test进行一下比较, 因为这两个框架用的较多,也有大虾想过…

PWN-PRACTICE-BUUCTF-25

PWN-PRACTICE-BUUCTF-25wustctf2020_name_your_catciscn_2019_final_2mrctf2020_shellcode_revengezctf2016_note2wustctf2020_name_your_cat 通过数组越界覆写返回地址为后门shell的地址 from pwn import * #ioprocess(./wustctf2020_name_your_cat) ioremote(node4.buuoj.c…

使用 Github Pages 和 Hexo 搭建自己的独立博客【超级详细的小白教程】

2022-01-25 更新:博客新地址:https://www.itbob.cn/ 欢迎关注我的专栏:《个人博客搭建:HexoGithub Pages》,从搭建到美化一条龙,帮你解决 Hexo 常见问题! 推荐阅读:《Hexo 博客优化…

windows程序消息机制(Winform界面更新有关)

1. Windows程序消息机制 Windows GUI程序是基于消息机制的,有个主线程维护着消息泵。这个消息泵让windows程序生生不息。 Windows程序有个消息队列,窗体上的所有消息是这个队列里面消息的最主要来源。这里的While循环使用了GetMessage() 这个方法,这是个阻塞方法,也…

PWN-PRACTICE-BUUCTF-26

PWN-PRACTICE-BUUCTF-26护网杯_2018_gettingstartwustctf2020_number_gamepicoctf_2018_are you rootciscn_2019_en_3护网杯_2018_gettingstart read到buf的时候有溢出,覆写v5为0x7FFFFFFFFFFFFFFF,v6为0x3FB999999999999A from pwn import * ioremote…

最新主流 Markdown 编辑器推荐

Markdown ,2004年由 John Gruberis 设计和开发,是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,以下将介绍目前比较流行的一些 Markdown 编辑器(排名…

PWN-PRACTICE-BUUCTF-27

PWN-PRACTICE-BUUCTF-27starctf_2019_babyshellpicoctf_2018_buffer overflow 0gyctf_2020_signinbjdctf_2020_YDSneedGrirlfriendstarctf_2019_babyshell 用\x00绕过shellcode检测,call rdx 跳转过去执行汇编代码,一个\x00必执行失败 于是需要找一条机…

Python3 基础学习笔记 C01【变量和简单数据类型】

CSDN 课程推荐:《8小时Python零基础轻松入门》,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员;已出版《跟老齐学Python:轻松入门》《跟老齐学Python:Django实…

Python3 基础学习笔记 C02【列表】

CSDN 课程推荐:《8小时Python零基础轻松入门》,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员;已出版《跟老齐学Python:轻松入门》《跟老齐学Python:Django实…

PWN-PRACTICE-BUUCTF-28

PWN-PRACTICE-BUUCTF-28wustctf2020_name_your_dogjudgement_mna_2016gyctf_2020_some_thing_interestingxman_2019_formatwustctf2020_name_your_dog Partial RELRO,可修改got表 scanf_got距离Dogs56个字节 当index为-7时,即可改写scanf_got为shell的地…