一文了解customRef 自定义ref使用

概念

按照文档中的说明：customRef 可以用来创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和trigger函数作为参数，并且应该返回一个带有 get 和 set 的对象。
其实大致意思就是，我们可以按照自己的业务需求去自定义封装一个ref对象，在其内部可以使用get和 set去跟踪或更新数据，有点计算属性内味了哈~

应用场景

第一个应用场景就是官网文档中所提到的：可以用来实现防抖函数。

直接上代码：

<template>
  <input
    v-model="text"
  >
</template>

<script setup lang="ts">
import {
      customRef } from 'vue'
function useDebouncedRef<T> (value: T, delay: number) {
     
  let timer: any = null
  return customRef<T>((track, trigger) => ({
     
    get () {
     
      track()
      return value
    },
    set (newValue) {
     
      clearTimeout(timer)
      timer = setTimeout(() => {
     
        value = newValue
        // ...do something
        trigger()
      }, delay)
    }
  }))
}

const text = useDebouncedRef<string>('', 2000)
</script>

代码很简单，相信大家一看就能懂~</