前端两大框架 vue 和 react 的区别
1. 设计思想
vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计;
react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流;
2. 编写语法
vue: 采用单文件组件格式,保留了html,css,js分离的写法;
react: 通过jsx渲染模板,html,css全部写入js中;
3. 构建工具
vue: 提供cli脚手架,可以非常容易的创建项目并进行配置;
react: 使用creat-react-app,有局限行,不能完成某些配置;
4. 状态管理
vuex : $store 被直接注入到了组件实例中,因此可以比较灵活的使用,组件既可以dispatch action又可以commit updates。
- 使用 dispatch 和 commit 提交更新
- 通过 mapState 或者直接通过 this.$store 来读取数据
redux : 我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来,redux 中只能进行 dispatch,并不能直接调用 reducer 进行修改。
两者之间的差异
Redux 使用的是不可变数据,而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state,而Vuex是直接修改
Redux 在检测数据变化的时候,是通过 diff 的方式比较差异的,而Vuex其实和Vue的原理一样,是通过 getter/setter来比较的(如果看Vuex源码会知道,其实他内部直接创建一个Vue实例用来跟踪数据变化)
React更偏向于构建稳定大型的应用,非常的科班化。
Vue更偏向于简单迅速的解决问题,更灵活,不那么严格遵循条条框框。
因此也会给人一种大型项目用React,小型项目用 Vue 的感觉。
前端两大框架 vue 和 react 的区别的更多相关文章
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 前端三大主流框架的对比React、Vue、Angular
前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的 ...
- 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题
前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...
- vue和react的区别
数据: vue:双向数据绑定和单向数据流.双向数据绑定:DOM元素绑定的data值,当发生改变后,vue的响应式机制会自动监听data的变化重新渲染.单向数据流:当父组件给子组件传递数据的时候,子组件 ...
- 2015前端各大框架比较(angular,vue,react,ant)
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- Java Web J2EE下的两大框架SSH和SSM对比
当下流行的两种企业开发MVC开源框架,是我们Java程序猿必备知识能力.MVC,即模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...
- 关于spring整合前两大框架的一些小问题04
关于spring中对延迟关闭session的配置,以及工具类BaseDao和BaseAction 一.HibernateTemplate执行查询时的一些小问题 1.当两个PO类的关系是多对一时: 我们 ...
- Vue和React的区别,以及如何选择?
简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...
- bootstrap与vue,react的区别
链接(与Vue区别):https://www.php.cn/faq/423095.html 链接(BootStrap, React, Vue的比较):https://www.jianshu.com/p ...
随机推荐
- NCF 中如何将Function升级到FunctionRender
简介 历史的车轮在不断的向前推进,NCF也在不断的迭代更新,只为成为更好的NCF 如果你之前没有用过NCF可以跳过这个文档,直接去下载最新的NCF源码进行实践. NCF仓库地址:https://git ...
- 1.在项目中使用D3.js
在项目中使用D3.js D3.js(全称:Data-Driven Documents)是一个基于数据操作文档的JavaScript库.D3帮助您使用HTML.SVG和CSS使数据生动起来.D3对web ...
- 系统调用篇——SSDT
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- 题解 P6345 [CCO 2017]接雨滴
解题思路 NOIP在即,感觉即将退役,或许是最后一篇题解了... 求水的体积不是特别好求,我们考虑求出 水+柱子 的体积最后再减去柱子的体积. 发现对于最高的柱子在中间的情况其实可以把最高柱子一侧的柱 ...
- 【数据结构】【图文】【oj习题】 图的拓扑排序(邻接表)
拓扑排序: 按照有向图给出的次序关系,将图中顶点排成一个线性序列,对于有向图中没有限定次序关系的顶点,则可以人为加上任意的次序关系,由此所得顶点的线性序列称之为拓扑有序序列.显然对于有回路的有向图得不 ...
- [loj3156]回家路线
令$dp[i]$表示经过第$i$条边后的最小烦躁值,有$且dp[i]=\min_{y_{j}=x_{i}且q_{j}\le p_{i}}dp[j]+f(p_{i}-q_{j})$,其中$f(x)=Ax ...
- 【CSS】水平居中和垂直居中
水平居中和垂直居中 2019-11-12 15:35:37 by冲冲 1.水平居中 (1)父级元素是行内元素,子级元素是行内元素,子级元素水平居中 ① 设置父级元素为块级元素 display:bl ...
- mybatis一对多查询resultMap只返回了一条记录
问题描述:因为领导的一个需求,需要用到使用resultMap,很久没使用了,结果就除了点意外.就记录下这个问题 准备两个类:author(作者)和book(书),数据库创建对应的author-> ...
- SimpleNVR安防监控RTSP/FLV/HLS直播流服务如何分权限添加用户指定通道观看
背景分析 随着SimpleNVR的用户越来越多,很多客户反馈给了我们很宝贵的简易以及用户体验.在此非常感谢大家对我们的支持.其中很多客户不想把所有的视频直播展现出来,想分权限添加新用户,指定通道让其观 ...
- vcstool是什么?
为什么会去了解vcstool,在想要手动编译并且获取ROS源码的时候,有一个Get ROS 2 code的章节中使用到了这个工具. mkdir -p ~/ros2_foxy/src cd ~/ros2 ...