Vue 2和Vue 3有什么区别？

Vue 3是对Vue 2一次全面的革新，它带来了性能提升、更好的TypeScript支持以及更灵活的组合代码方式。理解其核心区别对于决定升级或启动新项目至关重要。

响应式系统的重构

这是最根本的变化。Vue 2使用Object.defineProperty来递归劫持对象的属性实现响应式。这种方式无法检测到对象属性的添加或删除，需要通过Vue.set或Vue.delete等API来弥补，也无法原生支持Map、Set等集合类型。

// Vue 2
export default {
  data() {
    return {
      obj: { a: 1 }
    }
  },
  mounted() {
    this.obj.b = 2; // 非响应式
    this.$set(this.obj, 'b', 2); // 必须用 $set
  }
}

Vue 3引入了基于Proxy的响应式系统。Proxy可以拦截对象的更多操作，包括属性添加、删除、数组索引修改等，从根本上解决了Vue 2的响应式限制，并带来了更好的性能。

// Vue 3
import { reactive } from 'vue';
const state = reactive({ a: 1 });
state.b = 2; // 响应式的

组合式API与选项式API

Vue 2采用选项式API，通过data、methods、computed等选项来组织代码。这在组件简单时很清晰，但随着复杂度增加，逻辑可能分散在各处，难以维护。

// Vue 2 选项式API
<script>
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}
</script>

Vue 3引入了组合式API作为主要推荐。它允许你将与同一功能相关的数据、计算属性和方法组织在一起，通过函数形式（如ref、computed）在setup函数中组合。这让逻辑复用和代码组织变得无比灵活。

// Vue 3 组合式API
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => { count.value++ };
</script>

性能与架构优化

Vue 3在编译时进行了大量优化。它引入了片段支持，组件可以有多个根节点，减少了不必要的包装元素。编译器会生成更高效的虚拟DOM渲染函数，并优化了静态内容的提升。

<!-- Vue 3 多根节点片段 -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

Vue 3还采用了模块化架构，通过Tree-shaking使得最终打包体积更小。新的生命周期钩子如onMounted、onUpdated也作为函数从Vue中导入，与组合式API风格保持一致。

迁移与生态

Vue 3提供了兼容Vue 2的选项式API，使得旧项目可以渐进式迁移。但其响应式系统和部分API的变更（如v-model的用法、事件API）仍需要适配。主流生态库（如Vue Router、Vuex/Pinia、Vite）都已全面支持Vue 3。

对于新项目，Vue 3的组合式API和优异的性能是明确的选择。对于现有Vue 2项目，需要根据规模和收益权衡迁移成本。无论哪种，理解这些变化都是掌握现代Vue开发的关键。