目录
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