京东云开发者｜关于“React 和 Vue 该用哪个”我真的栓Q( 三 ) _生活百科

JS：React 组件本身就是 JS 文件，形式采用函数组件和类组件，编程范式上更贴近面向对象 + 官方推崇的函数式。Vue2组件是 Options Api，通过一个个配置项去实现生命周期、状态声明和逻辑开发。Vue3对于部分逻辑处理和Vue2有很大区别，setup 模式下，已经和React越来越趋同了，编程范式是面向过程 + 函数式，官方命名为 Composition Api，可以使同一个功能逻辑更加集中。

CSS：React的 CSS 使用方式是直接通过 Import 导入，Vue文件中有专门处理样式的 Style 标签，值得一提的是，Vue3内置状态驱动的动态 CSS，详细可查看官方文档（https://cn.vuejs.org/api/sfc-css-features.html）。

其他思考：React 的函数式组件和Vue3Composition Api，在 ESM 模块规范下对Tree-shaking 更友好，更容易减少构建体积。

组件使用

- React组件仅需引入即可使用。
- Vue的组件引入后需要全局或局部注册，且组件内的 Props 的要显式声明。

逻辑复用

- React的复用主要体现在高阶组件、render props 以及 hooks，但是也有他们对应的不足。高阶组件层级过深时容易带来 props 的命名冲突、来源不明确的问题，并且额外的组件实例会有更多的内存消耗。hooks 的引入，使React的逻辑抽离更容易，完全修复了命名冲突，来源准确，且无额外开销，可以贯彻函数式编程的理念。但是与此同时，因为 hooks 中可能保留着组件状态，也意味着每次React的更新，如果不进行手动优化，不论前后数据是否有变化，每个 hook 都会重新执行，这也是底层架构上额外带来的问题。
- Vue的组件复用主要是是用 Mixin、Extend、插槽和Vue3的 Function API 。Mixin：它和React的高阶组件带来的问题十分类似，响应式数据命名冲突，以及逻辑来源不明确。插槽：主要功能点是组件复用，它解决了数据命名冲突的问题，同时数据来源准确，但是也存在着额外组件实例带来的内存消耗Function API：目前看来是较为优秀的一种逻辑复用方式，没有以上列出的所有问题，虽然和React的 hooks 十分相像，但是本质不同，Vue可以追踪到数据变化，也仅在组件实例化时执行一次。

样式隔离方案

- React：CSS moduleCSS in JSBEM 命名规范
- Vue：官方支持 Style scopedBEM 命名规范

TS支持

- React本身就是 Js 和 Jsx，并且 TS 专门开了后门给做了支持（Jsx 其实一开始没有类型支持，Tsx 的开发体验完全来自于 TS 专门针对 Jsx 制定的一整套推导机制），所以Tsx 的类型支持也很完善。
- Vue2.x来自尤雨溪本人的回答是“因为当初API的设计根本就没有考虑类型系统”，2.x 跟 TS 的整合需要借助 vue-class-component 使用类组件进行开发，所以目前 2.x 版本的Vue对 TS 的支持度较React仍有差距，但是最近随着Vue2.7的发布，可以使 Vue2.x 用上大部分 Vue3 的写法，也使 Vue2.x 就具备了兼容 TS 的能力。
- Vue3，根据来自官方的建议，IDE 支持需用<script setup lang="ts">+vscode+volar，一样能获得非常好的 TS 体验。

文档体验（这里仅指中文文档）