深入探索Vue 3组合式API

一、组合式API诞生背景

1.1 Options API的局限性

• 代码组织碎片化
• 逻辑复用困难（mixins缺陷）
• 类型支持不足

1.2 设计目标

• 更好的逻辑复用
• 更灵活的组织方式
• 更好的类型推导
• 渐进式采用策略

二、核心概念解析

2.1 setup() 函数：组合式API的基石

（1）函数特性与执行时机

export default {setup(props, context) {// 在beforeCreate之前执行// 无法访问this// 返回对象将暴露给模板和其他选项}
}

• 执行顺序：在组件实例创建之前同步执行，位于beforeCreate和created生命周期之间
• 参数解析：
  • props：响应式的props对象，结构会失去响应性
  • context：包含attrs、slots、emit的非响应式对象
• 返回值：
  • 返回对象属性将合并到模板渲染上下文
  • 可返回渲染函数直接控制视图输出

（2）props处理规范

import { defineComponent } from 'vue'interface Props {title: stringcount?: number
}export default defineComponent({props: {title: String,count: {type: Number,default: 0}},setup(props: Props) {// 使用watch监听props变化watch(() => props.count, (newVal) => {console.log('count changed:', newVal)})}
})

• 类型安全：配合TypeScript实现严格类型校验
• 不可解构：直接解构props会导致响应性丢失，需使用toRefs
• 默认值处理：当父组件未传值时自动应用默认值

（3）上下文对象解析

setup(props, { attrs, slots, emit, expose }) {// 访问非响应式属性：console.log(attrs.class)// 检查插槽内容：const hasFooter = slots.footer// 事件触发：emit('submit', payload)// 暴露公共属性：expose({ publicMethod })
}

• attrs：包含未在props中声明的属性
• slots：访问通过插槽分发的内容（v-slot语法）
• emit：替代this.$emit的事件触发方式
• expose：控制组件实例对外暴露的公共方法

（4）响应式状态管理

const state = reactive({user: {name: 'Alice',posts: []},loading: false
})// 嵌套对象自动响应化
watchEffect(() => {console.log('User name changed:', state.user.name)
})

• 深层响应性：reactive会递归转换对象属性
• 数组处理：支持数组索引修改和length变更检测
• 自动解包：在模板中访问ref无需.value，但JS环境中需要

---

2.2 响应式系统：重新定义数据驱动

（1）响应式核心原理

const targetMap = new WeakMap()function track(target, key) {// 收集依赖
}function trigger(target, key) {// 通知更新
}const handler = {get(target, key, receiver) {track(target, key)return Reflect.get(...arguments)},set(target, key, value, receiver) {const result = Reflect.set(...arguments)trigger(target, key)return result}
}

• Proxy代理：基于ES6 Proxy实现属性访问拦截
• 依赖追踪：通过WeakMap建立目标对象->属性->依赖的映射关系
• 批量更新：Vue的调度机制确保多次状态变更合并为单次更新

（2）ref的进阶用法

// DOM元素引用
const inputRef = ref<HTMLInputElement | null>(null)// 组件挂载后访问
onMounted(() => {inputRef.value?.focus()
})// 模板引用
<template><input ref="inputRef">
</template>// 复杂类型处理
const state = ref({user: {name: 'Bob'}
})// 自动解包
state.value.user.name = 'Charlie'

• 模板引用：替代this.$refs的声明方式
• 类型标注：在TypeScript中明确指定引用类型
• 对象嵌套：ref可以包裹复杂对象结构

（3）reactive的边界情况

// 响应式丢失场景
const state = reactive({ x: 0 })
let { x } = state // 值拷贝，失去响应性// 正确解构方式
const { x } = toRefs(state)// 数组处理特例
const list = reactive([1, 2, 3])
list = reactive([4,5,6]) // 错误！需要修改现有引用
list.push(4) // 正确方式// 使用readonly保护
const protectedState = readonly(state)
protectedState.x++ // 控制台警告

• 引用替换限制：必须保持对象引用不变
• 数组变异方法：push/pop等标准方法可触发更新
• 只读保护：防止意外修改共享状态

（4）响应式工具函数对比

方法	作用	典型场景
toRef	为源响应式对象属性创建ref	props解构时保持响应性
toRefs	转换整个响应式对象为普通对象	从组合函数返回响应式状态
isProxy	检查是否为代理对象	调试响应式系统
isReactive	检查reactive创建的代理	类型判断
isReadonly	检查只读代理	安全校验
markRaw	标记对象永不转为响应式	性能优化/集成第三方库
shallowRef	创建浅层ref	大型对象性能优化
triggerRef	手动触发shallowRef更新	强制刷新界面

---

2.3 生命周期：全新的接入方式

（1）完整生命周期映射表

Options API	Composition API	触发时机
beforeCreate	-	被setup替代
created	-	被setup替代
beforeMount	onBeforeMount	DOM挂载开始前
mounted	onMounted	DOM挂载完成后
beforeUpdate	onBeforeUpdate	响应式数据变更导致更新前
updated	onUpdated	虚拟DOM重新渲染后
beforeUnmount	onBeforeUnmount	组件卸载前(vue2的beforeDestroy别名)
unmounted	onUnmounted	组件卸载后(vue2的destroyed别名)
errorCaptured	onErrorCaptured	捕获后代组件错误时
renderTracked	onRenderTracked	响应式依赖被追踪时(开发模式)
renderTriggered	onRenderTriggered	响应式依赖触发更新时(开发模式)

（2）组合式生命周期示例

import { onMounted,onUpdated,onUnmounted 
} from 'vue'export default {setup() {// 同步调用保证正确注册onMounted(async () => {const data = await fetchData()// 异步操作不会阻塞生命周期})// 支持多次注册相同钩子onMounted(() => console.log('第一个mounted回调'))onMounted(() => console.log('第二个mounted回调'))// 清理副作用示例const timer = ref()onMounted(() => {timer.value = setInterval(() => {/* 定时任务 */}, 1000)})onUnmounted(() => {clearInterval(timer.value)})}
}

（3）生命周期使用原则

1. 同步注册：必须在setup同步调用生命周期钩子

   // 错误示例
   setTimeout(() => {onMounted(() => {}) // 将不会执行
   }, 100)
   

2. 执行顺序：按照注册顺序同步执行
3. 异步操作：钩子函数本身可以包含异步代码，但不会延迟生命周期进度
4. 组件树顺序：父组件onBeforeMount先于子组件onBeforeMount

（4）调试钩子实践

onRenderTracked((event) => {console.log('依赖追踪:', event)
})onRenderTriggered((event) => {console.log('依赖触发更新:', event)
})

• 开发模式专用：帮助分析组件渲染行为
• 事件对象：包含target（响应式对象）、key（触发属性）、type（操作类型）等信息
• 性能优化：识别不必要的渲染触发源

---

2.4 响应式原理探秘

（1）依赖收集流程

// 伪代码实现
function reactive(obj) {return new Proxy(obj, {get(target, key) {track(target, key)return Reflect.get(target, key)},set(target, key, value) {const result = Reflect.set(target, key, value)trigger(target, key)return result}})
}// 副作用函数注册
let activeEffect
class ReactiveEffect {constructor(fn) {this.fn = fn}run() {activeEffect = thisreturn this.fn()}
}function watchEffect(fn) {const effect = new ReactiveEffect(fn)effect.run()
}

（2）响应式类型对比

	ref	reactive	shallowRef
创建方式	ref(value)	reactive(object)	shallowRef(value)
访问方式	.value	直接访问属性	.value
嵌套响应	自动展开	递归响应	非递归
类型支持	基础类型/对象	仅对象	任意类型
模板自动解包	支持	不需要	支持
适用场景	独立基本值、模板引用	复杂对象结构	大型对象性能优化

（3）响应式转换规则

const raw = {}
const observed = reactive(raw)console.log(observed === raw) // false
console.log(reactive(observed) === observed) // trueconst refVal = ref(0)
console.log(ref(refVal) === refVal) // true

• 代理唯一性：对同一原始对象多次调用reactive返回相同代理
• ref保护机制：如果传入ref给ref构造函数，直接返回原ref
• 原始对象保护：Vue不会代理Vue实例或代理对象

---

2.5 组合式API中的上下文处理

（1）跨层级访问示例

// 祖先组件
import { provide } from 'vue'setup() {const theme = ref('dark')provide('theme', theme)
}// 后代组件
import { inject } from 'vue'setup() {const theme = inject('theme', 'light') // 默认值return { theme }
}

（2）模板引用转发

// 子组件
import { defineExpose } from 'vue'setup() {const publicMethod = () => { /* ... */ }defineExpose({ publicMethod })
}// 父组件
const childRef = ref()onMounted(() => {childRef.value.publicMethod()
})

三、核心API深度解析

3.1 响应式工具

// 解构响应式对象
import { reactive, toRefs } from 'vue'const state = reactive({x: 0,y: 0
})const { x, y } = toRefs(state)

3.2 计算属性

const doubleCount = computed(() => count.value * 2)

3.3 副作用管理

// watchEffect自动追踪依赖
const stop = watchEffect(() => {console.log(`count变化: ${count.value}`)
})// 精确控制的watch
watch(count, (newVal, oldVal) => {// 执行特定操作
})

四、逻辑复用模式

4.1 自定义组合函数

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'export function useMouse() {const x = ref(0)const y = ref(0)function update(e) {x.value = e.pageXy.value = e.pageY}onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))return { x, y }
}// 组件使用
import { useMouse } from './useMouse'export default {setup() {const { x, y } = useMouse()return { x, y }}
}

4.2 异步状态管理

// useFetch.js
import { ref } from 'vue'export function useFetch(url) {const data = ref(null)const error = ref(null)const loading = ref(false)async function fetchData() {try {loading.value = trueconst response = await fetch(url)data.value = await response.json()} catch (err) {error.value = err} finally {loading.value = false}}return {data,error,loading,fetchData}
}

五、最佳实践

5.1 代码组织模式

export default {setup() {// 数据逻辑const { x, y } = useMouse()// 业务逻辑const { data, fetch } = useFetch('/api')// 其他逻辑const count = useCounter()return { x, y, data, fetch, count }}
}

5.2 TypeScript集成

interface User {id: numbername: string
}const users = ref<User[]>([])

六、与Options API对比

6.1 逻辑组织对比

// Options API
export default {data() {return { count: 0 }},methods: {increment() { this.count++ }},mounted() {console.log('挂载完成')}
}// Composition API
export default {setup() {const count = ref(0)const increment = () => count.value++onMounted(() => console.log('挂载完成'))return { count, increment }}
}