vue 和 react 的区别有哪些

vue 和 react 有什么区别呢？下面从这 4 个角度来说一说！

（1）从编程范式的角度讲 在 vue-loader、vue-template-compiler 的支持下，vue 可以采用 SFC 单文件组织的方式实现组件化；vue 有指令，使用指令能够方便地渲染视图，vue 表单是双向绑定的；vue 组件是基于选项式的编程，常用选项有生命周期、计算属性、侦听器等；vue 的组件库十分繁荣，自定义属性、自定义事件、自定义插槽是 vue 组件化的三大基础。众多社区中的 vue 轮子，在 vue 架构中被 Vue.use 注册即可使用。

react 的语法基础是 JSX，react 中没有指令，元素渲染、条件渲染、列表渲染、动态样式都是基于 JSX 语法的。在 webpack 环境中，要安装 @babel/core、@babel/preset-react 等，实现对 JSX 的编译。React 表单是单向绑定的，推荐使用受控表单。组件封装可以是类组件，也可以函数式组件，其中 props 是 React 组件化的核心。

（2）从组件通信的角度讲 在 vue 组件通信中，跨组件通信的手段极其丰富且灵活，常用的通信方案有父子组件通信、ref 通信、事件总线、provide/inject、parent/children、listeners/attrs、slot 插槽通信等。除此之外，在 vue 中还可以使用 vuex 或 mobx 来实现跨组件通信。总体上来讲，vue 的组件通信极其灵活，自上而下、自下而上都是容易实现的；也正是因为过于灵活，这会 “诱惑” 开发者容易滥用通信手段，导致 vue 项目呈现出 “易开发、难维护” 的现状。

在 react 中数据是单向数据流，在组件树中数据只能自上而下地分发和传递。state 是组件自有的状态数据，props 是父级组件传递过来的数据。在 react 中最最基本的通信方案是状态提升，还有 React 上下文也可以实现自上而下的数据流。鉴于 react 这种数据流的特性，即使集成了 Redux 仍然会呈现出单向数据流的特征，因此 React 数据流更容易被管理，配合 Redux 一起更适合做中大型的项目开发。

（3）从底层原理的角度讲 vue 支持指令是因为背后有 vue-template-compiler 这个编译器的支持，把带有指令的视图模板转化成 AST 抽象语法树，进一步转化成虚拟 DOM。vue 的响应式原理是使用了 Object.defineProperty 进行了数据劫持，数据劫持发生 vue 组件的创建阶段，vue 的响应式原理和 mobx 状态管理的响应式原理相似，这种响应式实现最早出现在 knockout 框架。如果要手写一个简单版本的 vue，需要实现 Compiler 类（用于模板编译）、Watcher 类（用于更新视图）、Dep 类（用于依赖收集）、Observer 类（用于数据劫持）、Vue 类（构造函数）等。

react 自 v16 以后发生了很多变化，v16 以后底层的 “虚拟 DOM” 不再是简单 JSON 数据了，React 采用了最新的 Fiber（双向链表）的数据结构，作为 “协调”（Diff）运算的基础数据。React 背后还提供了强大的 react-reconciler 和 scheduler 库实现 Fiber 链表的生成、协调与调度。相比 vue 组件，react 在较大组件方面的性能更高。如果要手写一个简易版本的 React，其核心要实现以下功能，createElement（用于创建元素）、createDOM/updateDOM（用于创建和更新 DOM）、render/workLoop（用于生成 Fiber 和协调运算）、commitWork（用于提交）等，如果还有支持 Hooks，还得封闭 Hooks 相关的方法。

（4）从社区发展和未来展望的角度讲 vue 生态繁荣，用户基础大。vue3.0 和 vite 的诞生给 vue 生态增加了新的生命力，同时也给 vue 开发者带来了空前的挑战。vue3.0 众多新特性，以组合 API、更友好地支持 TS 为代表，使得 vue3.0 的写法更加灵活。上手 vue3.0 并不难，但，要想写出健壮的可维护性更强的 vue3.0 代码，并不容易，这需要广大的前端开发者有更强大的前端基础功，对 MVVM 有深刻的理解和沉淀。

react 生态稳步向前，背后有强大的 Facebook 开发团队，从类组件编程向 Hooks 编程的转化指明了前进的方向。React (v18) 呼之欲出，让前端开发者对 React 更具信心。在国内，阿里系的 React 开源项目繁荣，给以开发者足够的信心，至少三五年内深耕 React 仍然大有可为。