Vue与React的异同
一、相同点:
1. 都用虚拟dom实现快速渲染
2. 都支持组件化,都有props(properties)的概念,允许父组件往子组件或孙组件传送数据(不允许子组件改变父组件传来的props值)
3. 都是数据驱动视图
4. 都支持服务端渲染
5. 都有管理状态,React有redux,Vue有Vue、
6. 都有支持native的方案,React的React native,Vue的weex
7. 都有组合功能,React使用 Hoc(高阶组件),Vue使用mixins(混合)
8. 都有自己的构建工具,可以快速搭建开发环境。React可以使用Create React App (CRA),而Vue对应的则是vue-cli
二、不同点:
1. 实现原理不同
1) react 函数式组件思想(diff算法,react只对比节点的key和tag)
react中数据发生变化(调用setstate时),render函数就会执行,重新生成一个新的虚拟dom, 就会遍历 diff 当前组件所有的子节点子组件,新旧比较,得出差异然后渲染。 react 16 采用了 fiber 把Dom树微观化成链表,可以中断的,分片的在浏览器空闲时候执行,提高diff效率。
2) vue 组件响应式思想 (diff算法,vue对比key、tag还有其他属性)
vue组件中数据发生变化,会触发setter,由于vue组件中数据的getter的作用,收集了依赖,setter触发会根据这些依赖,生成新的虚拟dom,然后对比新旧虚拟dom进行渲染。 采用代理监听数据,在组件内修改数据,就通过虚拟DOM去更新页面,而组件间通过响应式通知更新。
2. 设计结构不同
vue使用的是可变数据,数据由data属性在vue对象中管理,
React 更强调数据不可变,由setState()更新状态
3. 数据流不同
vue是通过v-model进行双向数据流,react是单向数据流,一般通过setState/onChange
注:
1)双向数据流和数据双向绑定不是一回事,react单向数据流也可以双向绑定数据,例如表单的事件绑定。
2)双向数据流是说数据的流向是双向的;双向数据绑定指的是单纯的数据与视图层之间的绑定。实质上也是单向数据流在加上用户的操作事件来实现双向数据绑定。无论是单向数据还是双向,最终呈现给用户的都是同步效果.只不过是一个需要手动实现,一个自动。
3)双向绑定把数据变更的操作隐藏在框架内部,调用者并不会直接感知。Vue 中的 v-model 来说,他是一个语法糖,利用 bind 语法与事件来实现数据与视图之间的绑定。
4. 渲染方式的不同
React是通过JSX渲染模板,等计算完毕之后在渲染;
Vue是通过一种拓展的HTML语法进行渲染,边计算边渲染
5.框架本质不同
Vue本质是MVVM框架,由MVC发展而来。
React是前端组件化框架,只针对MVC的view层。
6. 通信方式不同
vue: 父通过props向子传递数据或回调(一般传数据);子通过事件向父发消息;通过provide / inject 来实现父向子注入数据,可跨层级传递。
react:父通过props向子传递数据或回调;子通过回调向父发消息;通过 context进行跨层级的通信。
参考:
详解单向数据流与双向数据绑定_mytheart的博客-CSDN博客_双向绑定和单向数据流
Vue 和 React 的区别__小小怪_的博客-CSDN博客_vue和react区别
Vue与React的异同相关推荐
- vue和react的异同
react和vue大体上是相同的,比如都使用虚拟DOM高效的更新视图,都提倡组件化,都实现了数据驱动视图,都使用diff算法,也都对diff算法进行了优化,都有router库实现url到组件的映射,都 ...
- vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
- 监听输入 vue_深度对比vue与react创建APP的差别,值得收藏
你是否尝试过使用前端主流框架 Vue.js 和 React 来创建同一个 App?相比之下,哪种更好呢?今天在WEB明教社区看到这样一篇文章,分享给大家,如果对大家有帮助,请给个小红心,搬砖不易... ...
- web前端知识点总结html,css,js,vue,react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
- 前端面试题(HTML、JS、Vue、React、小程序)
前端面试题 HTML && CSS HTML 1.Div 里面有个一个div ***** Q:有几种方法可以水平,垂直居中 2.doctype的作用 * 3.link标签和import ...
- vue与react组件的思考
前言 我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活,vue是一种死板的感觉.为什么有这种感觉呢,react有一种很强烈的欲望, ...
- Vue、React打包文件放在服务器,浏览器存在缓存问题的解决
Vue.React打包文件放在服务器,浏览器存在缓存问题的解决 参考文章: (1)Vue.React打包文件放在服务器,浏览器存在缓存问题的解决 (2)https://www.cnblogs.com/ ...
- web前端 vue、react、angular三大框架对比 与jquery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
- Vue、React、Angular最佳UI框架
摘要: 今天我们不聊技术,只"以貌取人". 刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue.React.Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩 ...
- Angular、Vue、React 和前端的未来
最近社区针对框架的争论,从发文互怼再到粉丝站队再到大漠穷秋准备离职,令人唏嘘不已.不知从何而起,前端圈已经逐步变成了前端娱乐圈.越来越多的人开始站队 Angular.Vue.React,仅仅围绕这些库 ...
最新文章
- 测试驱动开发 测试前移_测试驱动开发简介
- python 用模型预测数据 代码_万字案例 | 用Python建立客户流失预测模型(含源数据+代码)...
- 零基础入门学习Python(19)-内嵌函数和闭包
- 有趣的c语言程序Code,一个有趣的小程序
- discuz_style_default.xml修改
- Visual C++ 中的重大更改
- 阿里云联合中国信通院发布《云计算开放应用架构》标准
- VTK:定向圆柱体用法实战
- MySQL InnoDB 锁表与锁行
- c语言每个整数占9列,c语言 第五章 数据类型和表达式.ppt
- 李宏毅机器学习课程---2、Regression - Case Study
- 阿里宣布取消的周报又死灰复燃?3分钟的高效报表才是最后出路
- 万字长文带你从零开始认识机器学习
- [dfs] 洛谷 P1822 魔法指纹
- MyBatis-Plus——代码自动生成器
- windows性能监视器基本指标
- 树莓派默认密码_树莓派介绍:没有显示器,怎样远程控制树莓派?
- BIM设计/工程设计图形工作站硬件配置方案详解
- 微信公众账号登陆授权开发——1
- pyqt5 图像上划线_PyQt5 绘制画 线(鼠标笔)