Vue React的区别

79 阅读2分钟

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算法确定最小节点集合,只更新这些节点。