Vue.js响应式API

1. ref, reactive, toRef, toRefs

• ref - 创建响应式引用
• reactive - 创建响应式对象
• toRef - 创建指向响应式对象属性的引用
• toRefs - 将响应式对象转换为普通对象（包含 ref）

1.1 ref

• 作用​：创建一个响应式的引用对象，可以包装基本类型或对象类型。
• ​特点​：
  • 返回一个带有 .value属性的对象
  • 在模板中自动解包（无需使用 .value）
  • 适合包装基本类型值（字符串、数字等）
  • 也可以包装对象，但内部会使用 reactive转换

import { ref } from 'vue'// 基本类型
const count = ref(0)
console.log(count.value) // 0// 对象类型
const user = ref({ name: 'John', age: 30 })
console.log(user.value.name) // John

1.2 reactive

• 作用​：创建一个深层次的响应式对象（Proxy 代理）。
  ​- 特点​：
  • 只能用于对象类型（对象、数组、Map、Set）
  • 不需要 .value访问
  • 嵌套对象也会被自动转换为响应式
  • 不适合解构（会失去响应性）

import { reactive } from 'vue'const state = reactive({count: 0,user: {name: 'John',age: 30}
})// 直接访问属性
state.count++ // 响应式更新
console.log(state.user.name) // John

1.3 toRef

• 作用​：为响应式对象的某个属性创建一个 ref，保持与源属性的响应式连接。
• ​特点​：
  • 保持对源属性的响应式连接
  • 修改 ref 会更新源对象，反之亦然
  • 当需要将 prop 转换为 ref 时特别有用

import { reactive, toRef } from 'vue'const state = reactive({count: 0
})// 创建指向 state.count 的 ref
const countRef = toRef(state, 'count')countRef.value++ // 会更新 state.count
console.log(state.count) // 1state.count = 10 // 也会更新 countRef.value
console.log(countRef.value) // 10

1.4 toRefs

• 作用​：将响应式对象的每个属性转换为 ref，保持响应式连接。
• 特点​：
  • 解决 reactive 对象解构时失去响应性的问题
  • 返回的对象每个属性都是 ref
  • 在组合函数中返回响应式状态时特别有用

import { reactive, toRefs } from 'vue'const state = reactive({count: 0,name: 'John'
})// 将响应式对象转换为 ref 对象
const stateRefs = toRefs(state)// 解构后仍然保持响应性
const { count, name } = toRefs(state)count.value++ // 会更新 state.count
name.value = 'Alice' // 会更新 state.name

2. computed, watch, watchEffect,

• computed - 计算属性
• watch - 侦听器
• watchEffect - 立即执行侦听器

2.1 computed

• 作用​：创建基于其他响应式数据的派生值，具有缓存机制。
• ​特点​：
  • 惰性求值：只有依赖变化时才会重新计算
  • 自动追踪依赖
  • 返回一个只读的响应式 ref
  • 适合同步计算

import { ref, computed } from 'vue'const count = ref(0)
const doubleCount = computed(() => count.value * 2)console.log(doubleCount.value) // 0
count.value = 5
console.log(doubleCount.value) // 10

2.2 watch

• 作用​：观察特定数据源的变化，执行回调函数。
• ​特点​：
  • 需要明确指定侦听的数据源
  • 可以获取变化前后的值
  • 支持深度侦听
  • 支持异步操作
  • 可以手动停止侦听

import { ref, watch } from 'vue'const count = ref(0)// 基本用法
watch(count, (newValue, oldValue) => {console.log(`count从${oldValue}变为${newValue}`)
})// 侦听多个源
const name = ref('John')
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {// 处理变化
})// 深度侦听对象
const user = ref({ name: 'Alice', age: 30 })
watch(user, (newUser) => {console.log('用户信息变化', newUser)
}, { deep: true })// 立即执行
watch(count, callback, { immediate: true })

2.3 watchEffect

• 作用​：立即执行一个函数，并自动追踪其依赖，依赖变化时重新执行。
• 特点​：
  • 立即执行
  • 自动收集依赖
  • 没有新旧值参数
  • 支持异步操作
  • 可以手动停止

import { ref, watchEffect } from 'vue'const count = ref(0)
const name = ref('John')// 基本用法
watchEffect(() => {console.log(`count: ${count.value}, name: ${name.value}`)
})// 停止侦听
const stop = watchEffect(() => { /* ... */ })
stop() // 停止侦听// 清理副作用
watchEffect((onInvalidate) => {const timer = setTimeout(() => {console.log('执行操作')}, 1000)onInvalidate(() => {clearTimeout(timer) // 清理操作})
})

• 使用场景​：
  • 需要立即执行的副作用
  • 依赖关系复杂时
  • 不需要知道具体变化的值时
  • 需要自动收集依赖时

3. shallowRef, shallowReactive

• shallowRef - 创建浅层响应式引用，只对 .value本身进行响应式处理

  import { shallowRef } from 'vue'const largeObject = shallowRef({ nested: { data: 'value' } // 嵌套对象不会被响应式处理
  })// 改变顶层属性会触发响应
  largeObject.value = { ... } // 改变嵌套属性不会触发响应
  largeObject.value.nested.data = 'new value' // 不会触发更新
  

• shallowReactive - 创建浅层响应式对象，只对顶层属性进行响应式处理

  import { shallowReactive } from 'vue'const state = shallowReactive({topLevel: 'value',nested: { data: 'value' } // 嵌套对象不会被响应式处理
  })// 改变顶层属性会触发响应
  state.topLevel = 'new value'// 改变嵌套属性不会触发响应
  state.nested.data = 'new value' // 不会触发更新
  

4. readonly, shallowReadonly

• readonly - 创建只读的响应式代理
  • 任何修改尝试都会失败并产生警告
  • 深度只读（所有嵌套属性都是只读的）

  import { reactive, readonly } from 'vue'const original = reactive({ count: 0 })
  const copy = readonly(original)copy.count++ // 警告：Set operation on key "count" failed
  

• shallowReadonly - 创建浅层只读的响应式代理
  • 顶层属性只读
  • 嵌套属性可修改（非只读）

  import { shallowReadonly } from 'vue'const state = shallowReadonly({topLevel: 'value',nested: { data: 'value' }
  })state.topLevel = 'new' // 警告：Set operation failed
  state.nested.data = 'new' // 允许修改
  

5. customRef

• customRef - 创建自定义的 ref，显式控制依赖追踪和更新触发
  • 提供 track和 trigger函数手动控制
  • 适合实现防抖、节流等高级功能

  import { customRef } from 'vue'function useDebouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track() // 追踪依赖return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger() // 触发更新}, delay)}}})
  }// 使用示例
  const text = useDebouncedRef('', 500)
  

6. effectScope

• effectScope - 创建一个作用域，可以捕获其中创建的所有响应式 effect
  • 可以统一停止所有 effect
  • 适合在组件作用域外管理 effect

  import { effectScope, ref, watch } from 'vue'const scope = effectScope()scope.run(() => {const count = ref(0)watch(count, () => {console.log('count changed')})// 其他 effect...
  })// 停止所有 effect
  scope.stop()
  

7. getCurrentScope, onScopeDispose

• getCurrentScope - 获取当前活动的 effect 作用域
• onScopeDispose - 在当前作用域销毁时注册回调函数（在组合式函数中清理资源）

import { getCurrentScope, onScopeDispose } from 'vue'function useEventListener(target, event, callback) {target.addEventListener(event, callback)// 如果有当前作用域，注册清理函数if (getCurrentScope()) {onScopeDispose(() => {target.removeEventListener(event, callback)})}
}

8. provide, inject

依赖注入

9. nextTick

等待下一次 DOM 更新刷新（等DOM更新完成之后，再执行的回调函数）

10. useAttrs, useSlots

• useAttrs - 访问组件接收的非 props 属性
• useSlots - 访问组件的插槽内容

import { useAttrs, useSlots } from 'vue'const attrs = useAttrs()
const slots = useSlots()console.log(attrs.class) // 获取 class 属性
console.log(slots.default) // 获取默认插槽

11. defineModel

• defineModel - 简化自定义组件的双向绑定（v3.4新增）
  • 自动处理 modelValue和 update:modelValue
  • 支持修饰符

// 子组件
const model = defineModel()// 父组件
<ChildComponent v-model="value" />

12. withDirectives

• withDirectives - 在渲染函数中应用自定义指令

import { withDirectives, h } from 'vue'
import { vTooltip } from './directives/tooltip'export default {render() {return withDirectives(h('div'), [[vTooltip, 'This is a tooltip']])}
}

13. renderList

• renderList - 高效渲染列表（优化列表渲染性能）

import { renderList } from 'vue'export default {render() {return renderList(items, (item, index) => {return h('div', { key: item.id }, item.text)})}
}

14. resolveComponent, resolveDirective ​调试工具​

• resolveComponent - 按名称解析已注册的组件
• resolveDirective - 按名称解析已注册的指令

import { resolveComponent, h } from 'vue'export default {render() {const ButtonComponent = resolveComponent('MyButton')return h(ButtonComponent, { onClick: handleClick }, 'Click me')}
}

15. onRenderTracked, onRenderTriggered 样式处理​

• 调试钩子，用于追踪组件的渲染依赖和触发重新渲染的原因（性能分析和调试）

import { onRenderTracked, onRenderTriggered } from 'vue'onRenderTracked((event) => {console.log('依赖被追踪', event)
})onRenderTriggered((event) => {console.log('重新渲染被触发', event)
})

16. useCssModule, useCssVars

• useCssModule - 在 <script setup> 中访问 CSS 模块（在组合式 API 中使用作用域 CSS）

  import { useCssModule } from 'vue'const $style = useCssModule()// 在模板中使用
  <template><div :class="$style.container"></div>
  </template>
  

• useCssVars - 在组合式 API 中动态设置 CSS 变量（主题切换和动态样式）

  import { useCssVars } from 'vue'useCssVars((_ctx) => ({'--primary-color': theme.value.primary,'--secondary-color': theme.value.secondary
  }))