Vue和React区别

官方文档

一. Vue和React相同点

1. 使用 Virtual DOM
2. 提供了响应式 (修改Model会重新渲染View) 和组件化 (页面由多个组件构成) 的视图组件。
3. 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
4. 都支持服务端渲染

二. react 与 vue 的区别

2.1 更新粒度不同

React和Vue在更新粒度上存在显著差异。

React采用的是自顶向下的递归更新方式。当一个组件的依赖数据发生变化时，React 会递归地重新渲染这个组件及其所有子组件。React 引入了 Fiber 架构，通过将渲染工作拆分成多个任务，优化了更新和渲染的流程。

Vue采用的是组件级的更新方式。当一个组件的依赖数据发生变化时，Vue只会更新涉及到的组件，而不是整个应用。Vue 的响应式系统通过“依赖收集”机制，能够精确地知道哪些组件的视图依赖于发生变化的属性，每个组件都有自己的渲染 watcher ，掌管当前组件的视图更新，从而只更新这些组件。

总的来说，React 的更新粒度较大，可能会递归地更新整个组件树；而Vue的更新粒度较小，只会更新涉及到的组件。这种差异反映了两者在性能优化和实现方式上的不同。

2.2 渲染处理不同

React 只要数据有更新（setState，useState 等手段触发更新），都会去重新渲染页面（可以使用shouldComponentUpdate/ PureComponent 改善）。

Vue 只有依赖收集的数据发生更新，Vue 才会去重新渲染页面。

2.3 更新流程不同

React和Vue在更新流程上存在显著差异。

React的更新流程主要是通过重新渲染组件来实现的。当组件的状态（state）发生变化时，React会重新渲染该组件以及所有子组件。React通过比较新旧虚拟DOM树，使用diff算法来确定最小节点集合，然后只更新这些节点，以最小化DOM操作。

Vue的更新流程则基于数据依赖关系。当数据发生变化时，Vue会标记相关组件为脏数据，并在下一个事件循环中调用patch函数来更新视图。Vue通过比较新旧虚拟DOM树，使用diff算法来确定最小节点集合，然后只更新这些节点。

总的来说，React和Vue都采用了虚拟DOM和diff算法来优化DOM操作，但Vue更强调数据驱动视图，通过收集数据依赖来触发更新，而React则是通过重新渲染组件来发现和更新自身。这种差异反映了两者在处理更新流程时的不同理念和实现方式。

2.4 核心思想不同

React和Vue的核心思想有较大差异。

React推崇JSX。React推崇函数式编程，注重不可变性和单向数据流的组合，以提高代码的可预测性和可维护性。

Vue定位简单易上手，基于template模板 + options API。Vue的核心思想是数据驱动和组件化开发。Vue将数据作为核心，通过双向数据绑定将视图与数据关联起来。当数据发生变化时，Vue会自动更新视图。Vue还引入了指令、过滤器、混入、插槽等特性，使得组件的开发更加灵活和强大。

总的来说，React和Vue都强调组件化开发，但Vue更侧重于数据驱动和灵活性，而React则更注重函数式编程和组件的独立性。