Vue 3 中 customRef 的高级玩法，打造响应式数据黑科技

原创于 2025-06-21 19:02:50 发布 · 553 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #科技 #前端

前端Vue3 专栏收录该内容

44 篇文章

订阅专栏

关键词： Vue 3、customRef、响应式系统、Composition API、自定义 ref、性能优化、输入防抖、搜索建议、小红书风格教程

大家好呀～今天来和大家分享一个在 Vue 3 Composition API 中非常强大但又容易被忽视的黑科技 —— customRef！👏
如果你正在使用 Vue 3，并且希望对响应式数据进行更精细的控制（比如防抖、懒加载、异步处理等），那一定不能错过这个神器！

🎯本篇文章会从基础讲起，再到实战案例，带你一步步掌握 customRef 的用法，并附上可运行代码，保证你能轻松复现！

💡什么是 customRef？

在 Vue 3 中，除了 ref 和 reactive，还提供了一个更底层、更灵活的方式来创建响应式引用 —— customRef。

它允许你自定义 getter 和 setter，从而实现对响应式行为的完全控制。适用于：

输入框防抖
异步数据更新
数据缓存机制
懒加载处理
更复杂的响应式逻辑

🧪基本语法

function customRef<T>(factory: (track: () => void, trigger: () => void) => {
  get: () => T
  set: (value: T) => void
})

其中：

track()：通知 Vue 这个值被访问了，需要追踪依赖
trigger()：通知 Vue 值发生了变化，需要触发更新

🚀实战案例：带防抖功能的搜索框（Search Input）

场景说明：

我们有一个搜索框，用户输入时会向后端发送请求获取建议。为了避免频繁请求，我们需要对输入内容做防抖处理。

传统做法可能是在 watch 或 onInput 中加 setTimeout，但用 customRef 可以更加优雅地封装这个逻辑！

✅1. 封装防抖 customRef

import { customRef } from 'vue'

export function useDebouncedRef<T>(initialValue: T, delay = 200) {
  let timeout: ReturnType<typeof setTimeout>
  
  return customRef((track, trigger) => {
    let value = initialValue

    return {
      get() {
        track() // 被读取时收集依赖
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger() // 值变更后通知更新
        }, delay)
      }
    }
  })
}

✅2. 在组件中使用

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入关键字搜索..." />
    <p>当前查询词：{{ searchQuery }}</p>
  </div>
</template>

<script setup>
import { useDebouncedRef } from './useDebouncedRef'

const searchQuery = useDebouncedRef('', 500)

// 你可以监听 searchQuery 的变化来做网络请求
</script>

📈效果演示：

当你快速输入 “hello world”，不会立即触发多次更新，而是等待 500ms 后才更新最终值。这样可以大大减少不必要的请求或渲染！

🛠️进阶技巧：结合 loading 状态 + 请求节流

你还可以将 customRef 与 fetch 结合起来，实现一个自动加载建议列表的输入框，甚至可以添加 loading 状态、错误提示等。

示例伪代码如下：

export function useAsyncSearchRef(delay = 300) {
  return customRef((track, trigger) => {
    let value = ''
    let result = ''
    let loading = false

    return {
      get() {
        track()
        return { value, result, loading }
      },
      set(newValue) {
        value = newValue
        loading = true
        trigger()

        fetch(`/api/search?q=${newValue}`)
          .then(res => res.json())
          .then(data => {
            result = data.suggestions
            loading = false
            trigger()
          })
      }
    }
  })
}