Vue2 vs Vue3 - 技术栈

Vue 2 与 Vue 3 的主要区别可以从以下几个方面对比：

1. 架构重构

Vue 2 ：基于 Options API，使用 Object.defineProperty 实现响应式
Vue 3 ：基于 Composition API（兼容 Options API），使用 Proxy 实现响应式

2. 响应式系统

javascript 复制代码

// Vue 2 - Object.defineProperty
data() {
  return {
    count: 0
  }
}

// Vue 3 - Proxy
import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Vue 3' })

优势：Proxy 能检测到属性的添加/删除，数组索引和长度变化

3. Composition API vs Options API

vue 复制代码

<!-- Vue 2 Options API -->
<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() { console.log('mounted') }
}
</script>

<!-- Vue 3 Composition API -->
<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)
const increment = () => count.value++

onMounted(() => {
  console.log('mounted')
})
</script>

4. 性能提升

打包体积：Vue 3 体积减小约 40%（Tree-shaking 优化）
渲染速度：初始渲染快 55%，更新快 133%
内存占用：减少约 50%

5. TypeScript 支持

Vue 2：需要额外的装饰器或复杂配置
Vue 3：原生 TypeScript 支持，更好的类型推断

6. 新特性

Fragment

vue 复制代码

<!-- 可包含多个根节点 -->
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

Teleport

vue 复制代码

<template>
  <teleport to="body">
    <!-- 将组件渲染到 body 下 -->
    <Modal />
  </teleport>
</template>

Suspense

vue 复制代码

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

7. API 变化

生命周期

Vue 2	Vue 3 (Options API)	Vue 3 (Composition API)
beforeCreate	❌ 使用 setup	setup
created	❌ 使用 setup	setup
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestroy	beforeUnmount	onBeforeUnmount
destroyed	unmounted	onUnmounted

全局 API

javascript 复制代码

// Vue 2
Vue.component()
Vue.directive()
Vue.mixin()

// Vue 3 - 改为应用实例
const app = createApp(App)
app.component()
app.directive()

8. v-model 改进

vue 复制代码

<!-- Vue 2：每个组件只能有一个 v-model -->
<ChildComponent v-model="value" />

<!-- Vue 3：支持多个 v-model -->
<ChildComponent 
  v-model:title="title"
  v-model:content="content"
/>

9. 事件 API

javascript 复制代码

// Vue 2
this.$on('event', handler)
this.$emit('event', data)

// Vue 3 - 推荐使用第三方库（如 mitt）或 Provide/Inject

10. 迁移建议

新项目：直接使用 Vue 3 + Composition API
老项目 ：
- 小项目：建议升级
- 大项目：逐步迁移或使用 Vue 2.7（包含部分 Vue 3 特性）

总结

Vue 3 在性能、开发体验和维护性方面都有显著提升，特别适合大型项目和需要更好 TypeScript 支持的项目。Composition API 提供了更好的逻辑组织和复用能力。