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 的区别的更多相关文章

  1. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  2. 前端三大主流框架的对比React、Vue、Angular

    前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的 ...

  3. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  4. vue和react的区别

    数据: vue:双向数据绑定和单向数据流.双向数据绑定:DOM元素绑定的data值,当发生改变后,vue的响应式机制会自动监听data的变化重新渲染.单向数据流:当父组件给子组件传递数据的时候,子组件 ...

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

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

  6. Java Web J2EE下的两大框架SSH和SSM对比

    当下流行的两种企业开发MVC开源框架,是我们Java程序猿必备知识能力.MVC,即模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...

  7. 关于spring整合前两大框架的一些小问题04

    关于spring中对延迟关闭session的配置,以及工具类BaseDao和BaseAction 一.HibernateTemplate执行查询时的一些小问题 1.当两个PO类的关系是多对一时: 我们 ...

  8. Vue和React的区别,以及如何选择?

    简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...

  9. bootstrap与vue,react的区别

    链接(与Vue区别):https://www.php.cn/faq/423095.html 链接(BootStrap, React, Vue的比较):https://www.jianshu.com/p ...

随机推荐

  1. SpringBoot 居然有 44 种应用启动器

    啥是应用启动器?SpringBoot集成了spring的很多模块,比如tomcat.redis等等.你用SpringBoot搭建项目,只需要在pom.xml引入相关的依赖,和在配置文件中简单的配置就可 ...

  2. USB3.0 转USB3.0

    前段时间因为项目需求需要将相机的USB3.0口转接出来,心想那还不想简单,结果第一次就碰壁了:先说一下usb3.0的引脚定义如图: 九个脚,2个地:注意USB3.0转3.0时数据线全交叉,DM-和DP ...

  3. linux查看和修改时间

    查看时间: # date Fri Jan 11 18:04:10 CST 2020设置时间 # date -s "19:20:30"设置日期+时间 # date -s " ...

  4. 从源码分析 XtraBackup 的备份原理

    MySQL物理备份工具,常用的有两个:MySQL Enterprise Backup 和 XtraBackup. 前者常用于MySQL企业版,后者常用于MySQL社区版.Percona Server ...

  5. Spark性能调优——9项基本原则

    原则一:避免创建重复的RDD 通常来说,我们在开发一个Spark作业时,首先是基于某个数据源(比如Hive表或HDFS文件)创建一个初始的RDD:接着对这个RDD执行某个算子操作,然后得到下一个RDD ...

  6. 中文NER的那些事儿5. Transformer相对位置编码&TENER代码实现

    这一章我们主要关注transformer在序列标注任务上的应用,作为2017年后最热的模型结构之一,在序列标注任务上原生transformer的表现并不尽如人意,效果比bilstm还要差不少,这背后有 ...

  7. Centos上安装MongoDB4.X

    一.下载并解压MongoDB 1.下载MongoDB 取件码w2px 2.通过ftp软件上传的服务器上,我的位置:/root/softwares 3.解压并放在opt文件夹下:tar zxvf mon ...

  8. 使用Shiro出现404的处理

    在使用Shiro的@RequiresXXX的注解时,可能会导致页面访问出现404错误,解决方法为在ShiroConfig类中添加如下的配置: @Beanpublic DefaultAdvisorAut ...

  9. QQ 表情大全

    rt,以下是比较常用的 QQ 表情简写: /kk:快哭了 /cy:呲牙 /ll:流泪 /dk:大哭 /yiw:疑问 /jk:惊恐 /se:色 /kel:可怜 /xyx:斜眼笑 /wx:微笑 /xk:笑 ...

  10. 洛谷 P5518 - [MtOI2019]幽灵乐团 / 莫比乌斯反演基础练习题(莫比乌斯反演+整除分块)

    洛谷题面传送门 一道究极恶心的毒瘤六合一题,式子推了我满满两面 A4 纸-- 首先我们可以将式子拆成: \[ans=\prod\limits_{i=1}^A\prod\limits_{j=1}^B\p ...