关键词:MVVM(Model-View-VIewModel)数据模型双向绑定。视图的数据变化会同时修改数据资源,数据资源的变化也会立刻反应到视图View上。

一.vue.js

vue是一套构建用户界面的渐进式框架。采用自底向上的增量开发的设计。vue的核心在于只关注视图层,已于上手,便于和第三方库或既有项目整合。

二.React

react和vue有很多相似之处,它们都有:

① 使用virtual DOM

② 提供了响应式和组件化的视图组件

③ 将注意力几种保持在核心库,而将其他功能如路由和全局状态管理交给相关的库

三.二者的区别

在运行性能方面,react和vue都是非常快的。

优化方面:

在react应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。

如要避免不必要子组件的冲渲染,需要在所有可能得地方使用PureComponent,或者手动实现shouldComponentUpdate方法(默认为true)。

然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate,并且没有上述的子树问题限制。

Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。

Vue、 React比较的更多相关文章

  1. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

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

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

  3. 前端开发组件化设计vue,react,angular原则漫谈

    前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...

  4. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  5. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  6. Angular Vue React 框架中的 CSS

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

  7. 干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)

    双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时. 数字增长等.相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTML结构大多比较复杂,用了4个并列的标签 ...

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

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

  9. uni-app,vue,react,Trao之缓存类封装

    uni-app,vue,react,Trao之缓存类封装 一,介绍与需求 1.1,介绍 缓存主要分为如下几个 1.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏 ...

  10. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

随机推荐

  1. fnb2b分支拉取注意事项

    1. 大B分支拉取以后不要忘记把index.php中dev环境改为 $save_url = "http://dev-b2b.dev1.fn/"; 2. 大B分支拉取后,记得/bas ...

  2. Mysql在Linux的基本操作文档

    总结了Mysql在Linux下的应用,以下是Linux操作系统操作MySQL常用命令小结,需要的朋友参考下: 1.Mysql服务 # chkconfig --list 列出所有系统服务 # chkco ...

  3. MongoDB的增、删、改、查操作(五)

    按照我们关系型数据库的思想,一个服务器要想存放数据,首先要有数据库,表,字段,约束,当然了也少不了主键,外键,索引,关系等: 但是在MongoDB的世界里边,我们不用预先的去创建这些信息从而直接来使用 ...

  4. composer ip2city配置

    //根据ip获取地址信息composer require "mylukin/ip2city: dev-master" // vendor/mylukin/ip2city/src/I ...

  5. 利用scp 远程上传下载文件/文件夹

    scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port ...

  6. 关于EOF:

    请先看下面一段程序: #include"stdio.h" int main() { ],t; int i,j; while(scanf("%s",a)!=EOF ...

  7. 8.Mysql数据类型选择

    8.选择合适的数据类型8.1 CHAR与VARCHAR CHAR固定长度的字符类型,char(n) 当输入长度不足n时将用空格补齐,char(n)占用n个字节,CHAR类型输出时会截断尾部的空格,即使 ...

  8. Java泛型:List<?>与List的区别

    为什么说List<?>是type-safe而List不是type-safe的? 1.List<?> compiler看到了你使用了wildcard ?,那么相当于你对compi ...

  9. Pandas基本介绍

    1.pandas主要的两个数据结构:Series和DataFrame Series的字符串表现形式为:索引在左边,值在右边.由于我们没有为数据指定索引.于是会自动创建一个0到N-1(N为长度)的整数型 ...

  10. spring 的 ApplicationContext.getBean(type) 无法获取bean,报错

    具体问题请看   https://q.cnblogs.com/q/108101/ 研究了两天: 经过上文中的排除法: 造成问题的原因是要获取的bean 中 有被切入的方法.. 就是可能该类会使用反射生 ...