Vue和React的区别

站长

2023年02月10日 17:47 · 阅读数 17

Vue：

Vue是一个用于Web构建的UI的渐进式框架。"渐进式框架"和"自底向上增量开发的设计"是Vue开发的两个概念。
特点：易用，使用成本低；灵活，生态系统完善。

React:

React主张函数式编程的理念，实现前端界面的高性能高效率开发，React擅长处理组件化页面。在React中，所有的组件渲染功能依靠JSX，JSX是JavaScript的语法扩展（jsx==js+xml），在创建UI组件和调试时非常简单有用。

一. 共同点：

1. 数据驱动视图。
2. 组件化。
3. 都使用 Virtual DOM + Diff 算法。

二. 不同点：

核心思想不同： Vue定位是尽可能的降低前端开发门槛，让更多人能够更快地上手开发。灵活易用的渐进式框架，进行数据拦截/代理，对侦测数据的变化更敏感/更精确。 React定位是提出UI开发的新思路。推崇函数式编程（纯组件），数据不可变以及单向数据流。当需要用到双向数据流的时候手动实现（onChange和setState）。
相应式原理不同: Vue依赖收集，自动优化，数据可变。递归监听data的所有属性，直接修改。当数据发生改变时，自动找到引用组件重新渲染。 React基于状态机，手动优化，数据不可变，需要使用 setState驱动新的state替换老的state。当数据改变时，以组件为根目录，默认全部重新渲染，所以React中会需要 shouldComponentUpdate这个生命周期函数方法来进行控制。
组件写法差异: React推荐的是JSX + inline style，也就是把HTML和CSS全部写进JavaScript中，即all in js； Vue推荐的是template的单文件组件格式（简单易懂，从传统前端转过来易于理解），即html,css，js都写在同一个文件里（Vue也是支持JSX写法的）。这个差异在一定程度上也是由于二者的核心思想不同而导致的。
diff算法: Vue对比节点。当节点元素相同，但是className不同，认为是不同类型的元素，删除重建。而React认为是同类型节点，只是修改节点的属性。 Vue的列表对比，采用的是两端到中间对比的方式，而React采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，React会把前面的节点依次移动，而Vue只会把最后一个节点移到第一个。总体来说，Vue的方式比较高效。
渲染过程: Vue可以更快的计算出Virtual DOM的差异，这是因为它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。 React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期函数方法可以进行控制，但Vue将此视为默认的优化。如果应用中交互复杂，需要处理大量的UI变化，那么使用Virtual DOM是一个好主意。如果更新元素并不频繁，那么Virtual DOM并不一定适用，性能很可能还不如直接操控DOM。
vuex和redux: 从表面来说，store注入和使用方式有一些区别。在Vuex中，$store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch，commit提交更新，通过mapState或者直接通过this.$store来读取数据。在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。另外，Vuex更加灵活一些，组件中即可以dispatch action,也可以commit updates,而Redux中之只能进行dispatch，不能直接调用reducer进行修改。从实现原理上来说，最大的区别有两点： Redux使用的是不可变数据，而Vuex的数据是可变的，因此，Redux每次都是用新的state替换旧的state，而Vuex是直接修改。 Redux在检测数据变化的时候，是通过Diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的。这两点的区别也是因为React和Vue的设计理念不同。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单快速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用Vue的感觉。
框架: Vue的本质是MVVM框架，从MVC发展而来。 React是前端组件化框架，从后端组件化发展而来。

三. 语法区别

路由
循环： Vue循环dom是在html里面使用 v-for 指令来进行循环。 React是使用
```
     {数组.map((循环出来的数据，下表)=>{})}
```
来进行循环。
跨域： Vue 写在 vue.config.js 里面。 React 写在 package.json 里面，也可以写在src文件夹下的 setupProxy.js 里面。

四. react和vue的选择

Vue：

1. 最新文档和更简单的语法
2. 更小，更快，更灵活
3. 需要丰富的HTML模板，易于开发。

React:

1. 需要构建移动应用程序
2. 需要构建大型应用程序。
3. 轻量级，易于版本迁移。