Vue3 和 React16.8 引入了较大的变更，所以 Vue 和 React 的对比一般指 Vue2 和 React16.7 的对比。

相同点

  • 使用 Virtual DOM
  • 提供了响应式（Reactive）和组件化（Composable）的视图组件
  • 核心库与路由（react-router、vue-router）和状态管理（redux、vuex）分离
  • 支持 JSX，移动端都支持原生渲染
  • 提供了命令行工具（create-react-app、vue-cli）
  • 提供了跨端解决方案（React Native、weex）

不同点

  • 预编译
    • React 可以通过 Prepack 优化 JavaScript 源代码，在编译时执行原本在运行时的计算过程，通过简单的赋值序列提高 JavaScript 代码的执行效率，消除中间计算过程及分配对象操作。缓存 JavaScript 解析结果，优化效果最佳
    • Vue 可以静态分析 template，构造 AST 树，通过 PatchFlags 标记节点变化类型
  • 渲染
    • React
      • 通过 shouldComponentUpdate / setState，使用 PureCompoent 等对比前后状态和属性，手动决定是否渲染来优化
      • 推荐 jsx 语法，可扩展性好，可以渐进式应用
      • CSS in JS
    • Vue
      • 推荐 template 语法，自动追踪组件依赖，精确渲染状态改变的组件
      • 支持并且默认单文件组件，样式仍旧是 CSS 语法，迁移方便
  • 事件处理
    • React
      • 事件委托到 document，之后委托到 根节点
      • 所有事件被合并为合成事件并兼容不同浏览器
      • 事件处理函数中的 this 需要手动绑定或使用箭头函数声明
    • Vue
      • 支持原生事件
      • this 自动绑定执行上下文