customRef

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

customRef 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

二、语法

---

<template>
  <div>
    {{ a }}

    <button @click="onChange">改变</button>
  </div>
</template>

<script setup lang="ts">
import { customRef } from 'vue'

function useCustomRef(value: string) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: string) {
        value = newValue
        trigger()
      }
    }
  })
}

const a = useCustomRef('哈哈')

const onChange = () => {
  a.value += '修改'
}
</script>

三、场景

---

3.1 防抖 ref

创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用

<template>
  <div>
    <input v-model="a" />
  </div>
</template>

<script setup lang="ts">
import { customRef } from 'vue'

function useCustomRef(value: string, delay = 200) {
  let timer:any
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: string) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

const a = useCustomRef('哈哈',5000)
</script>