1. ref()

基本用法

const count = ref(0) // 创建响应式变量
count.value++
count++

特点

• 用于基本类型(也可用于对象)
• 需要通过.value访问值
• 模板中自动解包(不需.value)
• 适合简单响应式数据

2. reactive()

基本用法

const state = reactive({
   count: 0,
   name: 'John'
})
count.value++
count++

特点

• 用于对象/数组等复杂类型
• 不需要.value直接访问
• 不能解构(会失去响应性)
• 适合复杂状态对象

3. computed()

基本用法

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

特点

• 基于依赖自动计算
• 具有缓存(依赖不变不重新计算)
• 返回一个不可变的ref
• 适合派生状态

4. watch()

基本用法

watch(() => state.count, (newVal, oldVal) => { // 回调
    console.log(`count变化: ${oldVal} -> ${newVal}`)
})

特点

• 精确监听特定数据源
• 可以获取旧值和新值
• 需要手动指定监听源
• 适合需要旧值的场景

5. watchEffect()

基本用法

watchEffect(() => {
    console.log('count值:', count.value)
})

特点

• 自动追踪依赖
• 立即执行一次
• 无法获取旧值
• 适合不需要旧值的场景

对比总结

特性	ref()	reactive()	computed()	watch()	watchEffect()
用途	基本类型响应式	对象响应式	计算属性	监听变化	自动依赖监听
访问方式	.value	直接访问	.value	N/A	N/A
缓存	无	无	有	无	无
立即执行	无	无	无	可配置	总是立即执行
主要优势	简单值响应	复杂对象响应	派生状态	精确控制监听	自动依赖收集

使用场景小结

1. ref() : 基本类型数据、需要保持响应式的单个值
2. reactive() : 复杂对象状态管理
3. computed() : 依赖其他状态的计算属性
4. watch() : 需要精确控制监听逻辑和获取旧值
5. watchEffect() : 自动追踪依赖的副作用

最佳实践

1. 组合式API中优先使用ref()和reactive()创建响应式状态
2. 派生状态使用computed()
3. 需要执行副作用时:
   • 需要旧值 -> watch()
   • 不需要旧值 -> watchEffect()
4. 避免在reactive()中使用解构
5. 复杂逻辑可组合多个响应式API使用