React vs Vue 相同点


  • 使用 Virtual DOM
  • 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
  • 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库

React vs Vue 不同点


  • React手动档 vs 自动档
  • React 崇尚 All in JS vs Vue 崇尚关注点分离
  • React全都是JS vs Vue 大量语法糖,大量反JS直觉/便利
  • 避免不必要的子组件的重渲染:
    • React需要使用 PureComponent,或是手动实现 shouldComponentUpdate 方法
    • Vue重点组件的依赖是在渲染过程中自动追踪的
  • 渲染模板
    • React使用 JSX 的渲染函数有下面这些优势:
      • 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
      • 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如,linting、类型检查、编辑器的自动完成)。
    • Vue 也提供了**渲染函数,甚至支持 JSX**。然而,Vue默认推荐的还是模板,优点如下:
      • 对于很多习惯了 HTML 的开发者来说,模板比起 JSX 读写起来更自然。
      • 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
      • 这也使得设计师和新人开发者更容易理解和参与到项目中。
      • 你甚至可以使用其他模板预处理器,比如 Pug 来书写 Vue 的模板。
  • 组件作用域内的 CSS
    • React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion),可选的方案有上百种
    • Vue 设置样式的默认方法是单文件组件里类似 style 的标签,这个可选 scoped 属性会自动添加一个唯一的属性,为组件内 CSS 指定作用域
  • 向上扩展
    • React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。
    • Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。
  • 向下扩展
    • React 学习曲线陡峭,在你开始学 React 前,你需要知道 JSX 和 ES2015
    • Vue学习曲线平滑,Vue 向下扩展后就类似于 jQuery
  • 原生渲染
    • React 有 ReactNative 且社区很蓬勃
    • Vue有Weex社区生态不能和前者媲美