vue和react的区别(个人感受)

模板引擎：

• Vue.js： vue中将响应式数据放入到html中渲染成DOM是以 mustache 为基础的实现方式。
• React： React 使用 JSX（JavaScript XML）语法，它允许在 JavaScript 代码中直接嵌入 HTML 标记和组件。

响应式数据：

• Vue.js： vue2和vue3分别利用js api：Object.defineProperties 和 proxy去监听 data() 中数据的变化；将旧的值 "修改" 为新值。
• React： react是利用自己管理的状态机useState(),setState()去管理和更新响应式数据，当值改变的时候不是”修改“，而是新值"覆盖"旧值；所以修改引用类型的响应式数据需要利用深度拷贝。且除了在原生事件和timeout/interval setState()是同步更新外，都是异步批量更新state的值。

Diff算法不同：

• Vue.js： Vue会比较新旧虚拟DOM树，找出差异。与React不同，Vue在差异计算时会使用组件的唯一标识符（key）来帮助识别元素，以确保正确更新。
• React： - vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到最后一个，从这点上来说vue的对比方式更加高效。

组件复用的方式不同：

• Vue.js： Vue组合不同功能的方式是通过 mixin ，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个HoC，那么这个被包装的组件就无法正常工作了。（vue2，vue3 也可以使用 自定义 Composition 函数 等来复用组件代码了）
• React： React组合不同功能的方式是通过 HoC(高阶组件） 。React最早也是使用mixins的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了mixinx转而使用HoC。高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。并且react中的props包括了vue中的数据属性，方法和子组件，使用起来更清晰。

组件通信：

• Vue.js： Vue 提供了多种方式来实现组件之间的通信，包括 Props、自定义事件、Vuex（状态管理库）等。
• React： React 也支持通过 Props 来传递数据给子组件，同时也可以使用 Context API 来在组件树中共享状态。（补充：且react中有自己的事件机制）

状态管理：

• Vue.js： Vue 通常使用 Vuex 来管理全局状态，它提供了一个集中式的状态管理方案。
• React： React 可以使用 Context API 进行状态管理，也可以使用像 Redux 这样的第三方库来实现更高级的状态管理。

学习曲线：

• Vue.js： 由于其简洁的模板语法和较少的概念，Vue 对于初学者来说可能更容易上手。
• React： React 的学习曲线可能会稍微陡峭一些，因为需要理解 JSX 和单向数据流等概念。

构建和部署：

• Vue.js： Vue 通常需要引入一个构建工具（如 Vue CLI）来创建项目，并可以根据需要选择性地引入模块。
• React： React 通常与构建工具（如 Create React App）一起使用，也可以根据需要进行自定义配置。