【架构】react 和 vue 对比

react 和 vue 对比

相关文章

react 和 vue 对比

一、宏观上

核心思想不同

  • Vue 定位是尽可能的降低前端开发的门槛，推崇渐进式开发体验
  • React 口号是重新思考最佳实践

封装程度不同

  • Vue 封装程度更高，内置指令、过滤器和数据双向绑定。
  • React 封装度比较低，适合扩展。

二、微观上

组件更新方式不同

  • Vue 使用栈调度，是一种同步执行更新任务的方式。在栈调度中，更新任务会被依次放入执行栈中，并按照入栈顺序依次执行。只有当一个更新任务执行完毕后，才会执行下一个更新任务。（vue3采用协调更新 - BlockTree 和 DynamicChild）

  • React 使用协调更新，是一种基于优先级的更新处理方式。在协调更新中，更新任务会根据一定的优先级被调度执行，以确保优先级较高的任务能够得到更及时的响应。协调更新通常采用时间片段调度和任务优先级调度等策略，以提高页面的性能和用户体验。（Fiber 架构）

组件实现不同

  • Vue 采用的选项式API，组件的选项分布在一个对象中（vue3支持组合式API）
  • React 采用的是组合式API，核心概念是使用函数而不是对象来组织组件的代码，便于重用逻辑

监听数据变化的原理不同

  • Vue 通过对数据的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
  • React 默认是通过比较引用的方式进行的，如果不优化可能导致大量不必要的重新渲染

数据流方向不同

  • Vue 父子组件单向数据流、组件内视图与模型支持双向
  • React 父子组件单向数据流，组件内视图与模型也是单向数据流

组件通信不同

  • Vue 父子组件通过 props $emit 形式通信，跨层级通过 provide \ inject
  • React 父子组件通过 props callback 形式通信，跨层级通过 content

模板渲染方式不同

  • Vue 通过template模板（vue3默认支持jsx）
  • React 通过JSX渲染模板

事件机制不同

  • Vue 采用标准Web事件（vue3会冒泡到组件根节点）
  • React 原生事件被包装，所有事件都冒泡到顶层document监听

Vuex 和 Redux 的不同

  • Vue $store被直接注入到了组件实例中，因此可以比较灵活的使用
  • React 我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来
架构
#架构
【架构】react 和 vue 对比
https://www.cccccl.com/20230402/架构/react 和 vue 对比/
作者
Jeffrey
发布于
2023年4月2日
许可协议