谈谈React与Vue的不同点和相同点

Posted 2022-11-04 勇敢*牛牛

React与Vue的相同点

（1）都支持服务器渲染；

（2）都是数据驱动视图；

在以前，我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作，采用数据驱动视图的方式，只需要关注数据的变化。

（3）都遵循组件化思想；
React和Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一一些细块，也就是组件，组件之间组合嵌套就形成最后的网页界面。

（4）都使用虚拟DOM；

（5）都有状态管理；

react有redux，vue有vuex。

---

不同点

（1）框架本质不同；

Vue本质是MVVM框架，是由MVC发展来的；
React是前端组件框架，是由后端组件演化而来的。

（2）数据流不同；

Vue实现双向绑定，在vue1.0中有两种方法可以实现双向绑定，父子组件之间的props以及组件与DOM直接的v-model。vue2去掉了第一种双向绑定方法，通过v-model实现数据双向绑定。

React一直不支持双向绑定，提倡的是单向数据流（onChange/setState）。

（3）监听数据变化的实现原理不同；

Vue通过getter，setter以及一些函数的劫持，能精确知道数据的变化。
React是通过比较引用方式（diff）进行的，当应用的状态改变时，全部组件都会重新渲染。

（4）组件写法差异；

React推荐的做法是JSX + inline style, 也就是把 html 和 CSS 全都写进 javascript 中；
Vue 推荐的做法是 template 的单文件组件格式，即 html,css,JS 写在同一个文件(vue也支持JSX写法)

（5）渲染过程不同。

Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。

（6）在state上的不同；

React中，state对象需要用setState方法更新状态；
在Vue中，state对象不是必须的，数据由data属性在vue对象中管理。