vue3 响应式API customRef()

使用ref()定义响应式数据：

<template>
  <div>
    <div>{{ inputValue }}</div>
    <input type="text" v-model="inputValue">
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputValue = ref('hello')
</script>

使用Vue提供的默认ref()定义响应式数据，当数据发生变化时，Vue 的响应式系统会自动检测到变化，并立即更新相关的页面部分。

现在，实现如下图所示的需求：当在输入框输入123时，输入结束1秒后，页面才更新。

<input type="text" v-model="inputValue">将输入框与inputValue进行双向绑定，当用户在输入框中输入数字1，input框的数据瞬间就改变了，在页面上用作展示的<div>{{ inputValue }}</div>也就更新了。

使用ref()定义响应式数据，数据变了，页面就会立即更新。它无法实现数据变了，等开发者做个 什么什么需求 再来改变页面渲染。

使用Vue提供的customRef()来实现需求。

customRef()

customRef()创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

类型

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

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

• 一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。
• get() 在数据读取时调用，用于返回值。
• set() 在数据被修改时调用，用于更新值并触发更新。
• track()：用于通知 Vue 的响应式系统，当前数据很重要，要持续跟踪数据，一旦数据发生变化，立即更新
• trigger()：用于通知 Vue 的响应式系统，数据发生了变化。

通过自定义响应式引用，可以控制何时触发依赖追踪（track）和响应式更新（trigger）。这对于实现一些特殊的逻辑或优化性能非常有用。

使用customRef()实现函数防抖

使用customRef()实现需求：当在输入框输入123时，输入结束1秒后，页面才更新。

这个功能其实就是函数防抖。

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

<template>
  <div>
    <div>{{ inputValue }}</div>
    <input type="text" v-model="inputValue">
  </div>
</template>
<script setup lang="ts">
import { customRef } from 'vue';
// 使用customRef定义响应式数据
let value = 'hello'
let timer:number
// track-跟踪  trigger-触发
const inputValue = customRef((track, trigger) => {
  return {
    // get：数据被读取时调用
    get() {
      track()  // 通知响应式系统正在读取数据，告诉响应式系统数据很重要，要对数据保持持续跟踪，一旦数据发生变化，就更新
      return value
    },
    // set：数据被修改时调用
    set(newValue) {
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        value = newValue
        trigger()  // 通知响应式系统数据已发生变化
      }, 1000) 
    }
  }
})
</script>

把这个方法封装成一个hooks：

import { customRef } from 'vue';

export default function useDataRef(initValue: string, delayTime: number) {
  let value = initValue
  let timer: number

  return customRef((track, trigger) => {
    return {
      // get：数据被读取时调用
      get() {
        track()  // 通知响应式系统正在读取数据，告诉响应式系统数据很重要，要对数据保持持续跟踪，一旦数据发生变化，就更新
        return value
      },
      // set：数据被修改时调用
      set(newValue) {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          value = newValue
          trigger()  // 通知响应式系统数据已发生变化
        }, delayTime)
      }
    }
  })
}

使用：

<template>
  <div>
    <div>{{ inputValue }}</div>
    <input type="text" v-model="inputValue">
  </div>
</template>
<script setup lang="ts">
import useDataRef from '@/hooks/useDataRef'
const inputValue = useDataRef('hello', 2000)
</script>