浅谈Vue与React的区别

经过你自己的学习，相信你们你对vue与react已经有了一些了解，也觉得这两大框架有一些相同之处。那咱们就来谈一下你觉得这两大框架有什么地方是不太一样的？

我觉得最大的相同点就是虚拟DOM节点，react与vue只有框架的骨架，其他的功能就是一些组件。

1 监听数据变化的实现原理不同

vue的话使用getter|setter 方法或者函数的劫持，去来判断数据的变化与否，不需要去做一些特别的优化就可以达到一些功能。react是通过比较引用的方法进行的，加入不进行优化的话，可能会导致一些VDOM进行重新渲染。

2 数据来看也是有区别的

vue是支持双向绑定的，但是react是不支持双向数据绑定的，是单向数据流有关。

3 mixins与Hoc

vue组合一些相同的逻辑的话通过minxins进行混入，react的话是通过hoc高阶组件进行完成，参数是组件，返回的依旧是一个组件，使用回调函数居多。

4 组件通信的话

vue中三种通信方式

（1）父组件通过props向子组件进行传输数据或者回调。

（2）子组件通过事件向父组件进行发送消息。

（3）也可以通过组件在进行包裹进行跨级传递。

react中

（1）父组件通过 props 可以向子组件传递数据或者回调

（2）可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

5、模板渲染方式的不同

在表层上，模板的语法不同

Vue是通过一种拓展的HTML语法进行渲染。

React 是通过JSX渲染模板（表面现象，毕竟React并不必须依赖JSX。）；

在深层上，模板的原理不同，这才是他们的本质区别：

Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，

比如条件语句就需要 v-if 来实现。

React是在组件JS代码中，通过原生JS实现模板中的常见语法，

比如插值，条件，循环等，都是通过JS语法实现的；

React的好处：

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

6、Vuex 和 Redux 的区别

从表面上来说，store 注入和使用方式有一些区别。

在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

使用 dispatch 和 commit 提交更新；

通过 mapState 或者直接通过 this.$store 来读取数据。

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来说，最大的区别是两点：

（1）Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改

（2）Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。

浅谈Vue与React的区别相关推荐

前端面试题：谈一谈vue和react的区别？
(1)从编程范式的角度讲在vue-loader.vue-template-compiler的支持下,vue可以采用SFC单文件组织的方式实现组件化:vue有指令,使用指令能够方便地渲染视图,vue表 ...
vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
java get请求数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
浅谈Vue.js的优势
写在前面今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用
如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (bi ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
Vue和React的区别到底是什么？
一提到前端框架,相信大家都对Vue和React不陌生,这两个前端框架都是比较主流的,用户也都比较多,但是我们在使用这些框架的时候,是否对这两个框架之间的区别有所了解呢?接下来,让我们来一起的系统梳理这 ...
浅谈 unix, linux, ios, android 区别和联系
浅谈 unix, linux, ios, android 区别和联系网上的答案并不是很好,便从网上整理的相对专业的问答. 1.UNIX 和 Linux UNIX 操作系统(尤尼斯), 是一个强大的多 ...

浅谈Vue与React的区别

浅谈Vue与React的区别相关推荐

最新文章

热门文章