【面试 · 四】vue2、vue3、react区别

目录

vue2、vue3区别

vue、react区别

vue2、vue3区别

1.生命周期

2.双向绑定方式（响应式系统）

vue2

使用 Object.defineProperty 实现响应式。
无法检测属性的添加、删除，必须使用 Vue.set() 和 Vue.delete()。
数组的响应式处理存在局限，不能检测数组的直接索引赋值（如 this.items[0] = newItem），需使用数组变更方法（如 push、pop 等）

// Vue 2 响应式无法检测到对象属性的添加
this.$set(this.someObject, 'newProperty', 'value');

vue3

使用 Proxy 代替 Object.defineProperty。
能够自动追踪对象的添加和删除操作，也能监听数组索引的直接赋值。
支持对嵌套对象的深度监听，不需要手动处理复杂的嵌套结构。
Vue 3 通过 Proxy 提高了响应式系统的性能，并解决了 Vue 2 的响应式系统中无法检测属性添加和数组索引赋值的问题。

const state = reactive({ count: 0 });
state.newProperty = 'value'; // 自动响应

3.代码风格不同

根节点不同——vue3支持多个根节点。

Vue 2    Options 选项式API 

export default {data() {return { count: 0 };},methods: {increment() {this.count++;}}
}

Vue 3    Composition 组合式API

import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => count.value++;return { count, increment };}
}

4.Typescript 支持

Vue 2 对 TypeScript 的支持有限。虽然可以通过类组件的方式使用 TypeScript，但这在编写复杂项目时可能显得笨拙。

vue3组合式 API 与 TypeScript 的结合更加自然。
import { ref } from 'vue';export default {setup() {const count = ref<number>(0);return { count };}
}

5.打包方式不同

webpack vite

6.状态管理不同 

vueX  pinia

vue、react区别

vue、react区别和对比