谈谈 React 和 Vue 的区别#

回答关键点#

推模型与拉模型 模板与 JSX

React 和 Vue 同为现代化的 Web 前端开发框架。相同之处都是采用数据驱动视图的思想，以虚拟 DOM 为基础，以组件化的方式组织应用，让开发者无需关心 DOM 细节，从更高的层次设计应用。不同之处在于，具体组件的编写方式（template vs jsx），数据响应模型以及具体的生态。

知识点深入#

1. 开发体验的区别#

学习曲线

• Vue：旨在降低前端开发门槛，学习曲线平缓，对了解 HTML、CSS 及 JS 的传统模式的前端开发和后端开发人员更友好。

• React：传播自身的概念和思想，需要了解 JSX 的相关知识，组件中的一切都可以通过 JavaScript 灵活控制，上手成本相较于 Vue 来说略高。

JSX 与模板语法

• Vue：默认使用基于 HTML 的模板语法，将模板、样式及逻辑划分开来使关注点分离。也可以选配 JSX 支持。
• React：默认使用 JSX 编写组件，将 HTML 和 CSS 组合到 JavaScript 中。在选用 TypeScript 作为开发语言时，可以更方便的整合相关工具链。
• 关于模板语法与 JSX 对比的一些举例：

  • 定制化的模板语法糖能够使编码更加简洁，相应的是稍微增加一点记忆成本。

  • JSX 写起来可能稍微繁琐一点，但其中的逻辑都是原生 JavaScript 控制的，在理解代码上，无需引入额外的概念。

  • Vue 单文件组件在拆分模板时，需要新建组件。

  • React 组件在拆分 JSX 时，可以灵活存在于变量或当前文件的新的组件中。

社区生态差异

• Vue：中文生态繁荣。偏向全家桶式的集成解决方案，官方提供了开箱即用的 Vuex，Vue Router 组件，使开发者可以不必纠结于基础组件的选择。

• React：将选择权交给开发者，并没有提供默认的组合模板，开发者可以自行组合社区中成熟的组件来构建应用，如 React Router，Redux，Mobx 等。

2. 核心概念的区别#

数据响应模型

• Vue 是推模型，当数据改动时，界面会自动更新。

  • Vue 通过 defineProperty 监听数据的改动，可以做到在数据改变时，精准细粒度的更新对应的视图。

• React 是拉模型，当数据改动时，需要手动调用 setState 更新界面。

  • React 倾向于函数式编程，view = f(state)，鼓励使用不可变数据，当 state 发生改变时，react 默认会使用浅比较来对比状态的差异，更具对比结果决定是否更新视图。

• 这两种模型不是互斥的，在 React 中可以使用像 MobX 之类的库实现推模型；在 Vue 中可以 freeze 数据，或调用组件的更新方法实现拉模型。

参考资料#

1. Vue
2. React