vue3 响应式API customRef()

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

<template><div><div>{{ inputValue }}</div><input type="text" v-model="inputValue"></div>
</template>
<script setup lang="ts">javascript">
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: () => Tset: (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">javascript">
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 = newValuetrigger()  // 通知响应式系统数据已发生变化}, 1000) }}
})
</script>

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

import { customRef } from 'vue';export default function useDataRef(initValue: string, delayTime: number) {let value = initValuelet timer: numberreturn customRef((track, trigger) => {return {// get：数据被读取时调用get() {track()  // 通知响应式系统正在读取数据，告诉响应式系统数据很重要，要对数据保持持续跟踪，一旦数据发生变化，就更新return value},// set：数据被修改时调用set(newValue) {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {value = newValuetrigger()  // 通知响应式系统数据已发生变化}, delayTime)}}})
}

使用：

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