Vue、React相同点
- 都有虚拟DOM(Virtual DOM)
- 提供响应式和组件化的视图组件
- 都有各自的路由和状态管理相关的库
- 都支持服务端渲染
Vue、React的不同点
体系区别
- React:MVC模式,单向驱动
- Vue:MVVM模式,双向驱动
两者之间更新粒度的不同
React:自顶向下的递归更新方式。一个组件的依赖数据发生变化时,React会递归重新渲染这个组件及其所有子组件。React引入Fiber架构,通过将渲染拆分多个任务,优化更新和渲染的过程。
Vue:组件级的更新方式。一个组件的依赖数据发生变化时,Vue会更新涉及到的组件,不是整个应用。Vue的响应式通过“依赖收集”机制。可以精确地知道哪些组件的视图依赖于发生变化的属性,每个组件都有自己的渲染watcher,只更新对应的组件。
渲染处理不同
React:只要数据有更新,都会去重新渲染页面
Vue:只有依赖收集的数据发生更新,Vue才会重新渲染页面
更新流程不同
React:通过重新渲染组件实现更新。当组件的状态发生变化时,react会重新渲染该组件以及所有子组件。React通过比较新旧虚拟DOM树,使用diff算法确定最小节点集合,只更新这些节点,最小化DOM操作
Vue:更新基于数据依赖关系。当数据发生变化时,Vue会标记相关组件为脏数据,在下一个事件循环中调用patch函数更新视图。Vue通过比较新旧虚拟DOM树,使用diff算法确定最小节点集合,只更新这些节点。