vue与react 区别

怼烎@ 2022-04-22 06:16 314阅读 0赞

# VUE和react区别 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

## ##

### 相同点： ###

1.都支持服务器端渲染

2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

## ##

### 不同点： ###

1.React严格上只针对MVC的view层（UI开发）,Vue则是MVVM模式

2.virtual DOM不一样

**vue会跟踪每一个组件的依赖关系,动了多少数据，就触发多少更新，不需要重新渲染整个组件树.**

**而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制，避免不需要的vrirtual dom re-render**（数据改变时，会建立一个新的virtual dom，比较diff，然后再将区别应用到现在的virtual dom上去)

3.组件写法不一样

React推荐的做法是 **JSX + inline style**, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';所以其render函数可能会比较凌乱，但是逻辑表达能力强

Vue推荐的做法是 `webpack+vue-loader `的单文件组件格式,即html,template css,style js,script写在同一个文件;

4.数据绑定:

vue实现了数据的双向绑定,react数据流动是单向的

vue的双向绑定（比如表单v-model是value 的单向绑定+onChange事件监听的语法糖，vue组件间的数据传递实际上与React一样，默认单向

5.在react应用中,是把state提取出来进行集中的管理，state对象是不可变的,需要使用setState方法更新状态;

在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

[原文地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220422/7dcf38ad49a045d68d21d772102ef26a.png
[Link 1]: https://www.cnblogs.com/yf-html/p/9102931.html