customref 是 vue 3 中用于完全控制 ref 的 getter 和 setter 行为的底层响应式 api，适用于防抖、缓存、localstorage 同步等需精细响应式控制的场景；必须手动调用 track() 和 trigger() 以确保依赖追踪与更新触发正常工作。
customRef 是 Vue 3 组合式 API 中一个底层响应式工具，它让你能**完全控制 ref 的 getter 和 setter 行为**。要实现“带缓存特征的响应式属性”，核心思路是：在 getter 中加入缓存逻辑（比如避免重复计算或重复请求），同时确保依赖追踪和触发更新的机制依然正常工作。
缓存的本质：避免重复执行昂贵操作
所谓“缓存特征”，通常指：当依赖未变时，不重新执行 getter 中的耗时逻辑（如复杂计算、API 调用、DOM 查询等），而是直接返回上次结果。但注意：customRef 本身不自动管理缓存，你需要手动实现缓存存储和失效逻辑。
关键点：
- 缓存值需存在闭包中（如用 let cache 或 ref 存储）
- getter 中判断是否可复用缓存（例如比对依赖是否变化）
- setter 中需主动清空缓存（否则后续 getter 会返回过期值）
- 必须调用 track() 告诉 Vue “我读了这个值”，调用 trigger() 告诉 Vue “这个值变了”
示例：带缓存的防抖计算属性（避免频繁重算）
假设有一个搜索关键词 keyword，你想实时生成高亮 HTML（含防抖+缓存），避免每次 keyword 变化都立刻执行耗时的高亮逻辑：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章