Vue 2 和 Vue 3 的详细对比，从 生命周期、API、响应式系统、函数调用 等多角度展开，最后附表格总结

以下是 Vue 2 和 Vue 3 的详细对比，从 生命周期、API、响应式系统、函数调用 等多角度展开，最后附表格总结：

---

1. 生命周期钩子差异

Vue 2	Vue 3	说明
beforeCreate	❌ 移除	Vue 3 推荐使用 setup() 替代初始化逻辑。
created	setup()（组合式API）	created 在 Options API 中仍可用，但 setup() 更推荐。
beforeMount	onBeforeMount	组合式 API 钩子名改为 on + 驼峰转连字符（如 onMounted）。
mounted	onMounted	同上。
beforeUpdate	onBeforeUpdate	同上。
updated	onUpdated	同上。
beforeDestroy	onBeforeUnmount	生命周期钩子名改为 onBeforeUnmount 和 onUnmounted。
destroyed	onUnmounted	同上。

示例对比

// Vue 2（Options API）
export default {created() {console.log('Instance created');},mounted() {console.log('DOM mounted');}
};// Vue 3（组合式 API）
import { onMounted, onBeforeMount } from 'vue';export default {setup() {onBeforeMount(() => console.log('Before mount'));onMounted(() => console.log('Mounted'));return {};}
};

---

2. 响应式系统差异

Vue 2	Vue 3	说明
Object.defineProperty	Proxy	Vue 3 使用 Proxy 替代 defineProperty，支持 for...in 遍历和数组变更检测。
this.data	reactive() 或 ref()	Vue 3 响应式数据需通过 reactive（对象）或 ref（基本类型）显式声明。

示例对比

// Vue 2
new Vue({data() {return { count: 0 };}
});// Vue 3（Options API）
export default {data() {return { count: 0 };}
};// Vue 3（组合式 API）
import { reactive } from 'vue';export default {setup() {const state = reactive({ count: 0 });return { state };}
};

---

3. API 使用差异

(1) 方法定义

Vue 2	Vue 3	说明
methods: { handleClick() { ... } }	setup() { const handleClick = () => { ... }; return { handleClick }; }	Vue 3 组合式 API 需在 setup() 中定义方法并返回。

(2) 计算属性

Vue 2	Vue 3	说明
computed: { fullName: () => ... }	import { computed } from 'vue'; computed(() => ...)	Vue 3 需通过 computed 函数声明，返回值需手动返回到模板。

(3) 侦听器

Vue 2	Vue 3	说明
watch: { prop: (newVal) => ... }	import { watch } from 'vue'; watch(prop, (newVal) => ...)	Vue 3 需通过 watch 函数显式调用，支持更灵活的选项。

(4) 事件

Vue 2	Vue 3	说明
$on/$off/$emit	推荐使用 v-model 或组合式 API	Vue 3 不推荐全局事件总线，建议通过 Props/Events 或 provide/inject 通信。

---

4. 其他关键差异

功能	Vue 2	Vue 3	说明
模板语法	v-on:click	@click	Vue 3 简化了指令简写（如 @ 替代 v-on，: 替代 v-bind）。
Teleport	❌ 无	✅ 新特性	允许将组件内容渲染到 DOM 的其他位置（如模态框）。
Fragments	❌ 无	✅ 新特性	组件可返回多个根节点，无需包裹 <div>。
Composition API	❌ 无	✅ 核心特性	通过 setup() 组合逻辑，解决 Options API 的耦合问题。
Tree Shaking	部分支持	完全支持	Vue 3 的函数式 API 更易实现按需导入。

---

5. 总结表格

类别	Vue 2	Vue 3	迁移建议
生命周期钩子	camelCase（如 mounted）	kebab-case（如 onMounted）	使用组合式 API 时改用 on 前缀钩子。
响应式系统	defineProperty	Proxy	使用 reactive 或 ref 声明响应式数据。
方法定义	methods	setup() 返回函数	将逻辑集中到 setup() 中，减少 Options 耦合。
计算属性	computed 对象	computed 函数	通过 computed() 显式声明并返回到模板。
事件系统	$on/$emit	Props/Events 或组合式	避免全局事件总线，改用 Props 或 provide/inject。
模板语法	v-on:click	@click	使用简写语法提升可读性。

---

迁移注意事项

1. 生命周期钩子：Vue 3 的 setup() 在 beforeCreate 和 created 之前执行，需调整初始化逻辑顺序。
2. 响应式数据：Vue 3 的 reactive 对象需通过解构赋值传递，避免直接修改原始对象。
3. 组合式 API：推荐逐步迁移关键逻辑到 setup()，而非完全抛弃 Options API。

如需更详细的迁移指南，可参考 Vue 官方迁移手册。