React和Vue的区别，vue2和vue3的区别1.React使用jsx，允许在js中写html代码，组件化开发，Vu

React和vue的区别

1.React使用jsx，允许在js中写html代码，组件化开发，Vue也是组件化开发，支持template+script； 2.React使用单向数据流，父组件单向传递数据到子组件，通过props和state管理，Vue支持双向数据绑定。Vue2使用object.defineProperty,Vue3使用proxy代理整个对象； 3.React有函数组件和类组件，有useState、useEffect等hooks管理状态，useMemo，useCallBack缓存数据，vue有data、watch、computed管理状态和数据； 4.React周期：挂载、更新、卸载 Vue周期：创建、挂载、更新、卸载； 5. 1.vue和react的diff算法，都是忽略跨级比较，只做同级比较。 vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。 2.vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。 3.vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个

vue2和vue3的区别

vue2使用`Object.defineProperty` 实现响应式

无法检测对象属性的添加/删除（需用 Vue.set/Vue.delete）
对数组的变异方法（如 push/pop）需要特殊处理
针对这些方法做了处理：push、pop、shift、unshift、 splice、sort、reverse。

Vue3: 使用 `Proxy` 重构响应式系统

支持动态添加/删除属性
直接监听数组变化（无需特殊方法）
更好的性能（尤其在大型对象上）

Vue2: 基于 `Options API`（data/methods/mounted 分块）

Vue3: 新增 `Composition API`（类似 React Hooks）

import { ref, computed, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    onMounted(() => console.log('Mounted!'));
    return { count, double };
  }
}

调整了几个生命周期名字

beforeDestroy → beforeUnmount
destroyed → unmounted
新增 renderTracked 和 renderTriggered（调试用）

Vue2: 组件模板必须单根节点

Vue3: 支持多根节点模板

<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

vue3支持suspense，异步渲染组件

<Suspense>
  <template #default><AsyncComponent /></template>
  <template #fallback>Loading...</template>
</Suspense>

vue2一个组件只能用一个v-model，但是vue3支持一个组件多个v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

支持自定义修饰符（如 v-model.customModifier）

vue2引入ts需要别的API，vue3支持ts；

React和Vue的区别，vue2和vue3的区别