会vue2，快速学习vue3，Composition API（组合式API篇，纯使用方法，只适合快速使用）

 

一、革命性变化速览

1. 响应式系统重构

   • 替换Object.defineProperty为Proxy实现

   • 新增ref/reactive响应式API

   • 支持Map/Set等集合类型响应式

2. 代码组织革命

   • 按功能而非选项组织代码

   • 逻辑组合取代选项混入

   • 更好的TypeScript支持

二、核心API三件套

// 必须引入的核心API
import {
ref,
reactive,
computed,
watchEffect,
watch
} from 'vue'

// 1. 响应式数据
const count = ref(0) // 基础类型
const state = reactive({ // 引用类型
  user: { name: 'Alice' }
})

// 2. 计算属性
const double = computed(() => count.value * 2)

// 3. 副作用监听
watchEffect(() => console.log(count.value))
watch([count, double], ([newVal]) => {})

三、生命周期对照表

ue2选项式API	Vue3组合式API	关键变化说明
beforeCreate	‌无（被setup替代）‌	逻辑直接写在setup()函数开头
created	‌无（被setup替代）‌	初始化逻辑迁移至setup()函数顶部
beforeMount	onBeforeMount	挂载前触发时机不变，render函数首次调用
mounted	onMounted	挂载完成时机不变（所有同步子组件已挂载）
beforeUpdate	onBeforeUpdate	响应式数据变化导致DOM更新前
updated	onUpdated	DOM更新完成后触发
beforeDestroy	onBeforeUnmount	‌命名变更‌：更准确反映卸载行为
destroyed	onUnmounted	‌命名变更‌：强调组件卸载完成状态
activated	onActivated	keep-alive组件激活逻辑不变
deactivated	onDeactivated	keep-alive组件停用逻辑不变
errorCaptured	onErrorCaptured	子孙组件错误捕获机制不变
-	onRenderTracked	‌新增调试钩子‌（开发环境）响应式依赖追踪
-	onRenderTriggered	‌新增调试钩子‌（开发环境）响应式依赖触发渲染

 

 注意 ：所有组合式 API 钩子需显式导入：例如 import { onMounted, onBeforeUnmount } from 'vue'

四、高级特性速通

1. 依赖注入

// 父组件
provide('theme', 'dark')

// 子组件
const theme = inject('theme')

2. 模板引用

const inputRef = ref(null)
<input ref="inputRef">

3. 自定义Hook

// useMouse.js
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  // 逻辑封装...
  return { x, y }
}

// 组件使用
const { x, y } = useMouse()

五、迁移必知陷阱

1. this不再可用，所有数据需显式返回

2. v-model升级为多个参数绑定

3. 事件总线推荐替换为provide/inject