Vue 创建自定义 ref 函数

Vue 创建自定义 ref 函数 customRef

customRef 用于：创建一个自定义的 ref 函数，并对其依赖项跟踪和更新触发进行显式控制。

 使用 customRef 创建自定义 ref 函数

// 创建自定义 ref 函数
function myRef(value) {return customRef((track, trigger) => {return {get() {track(); // 通知 Vue 追踪 value 的变化return value; // 返回 value 值},set(newValue) {value = newValue; // 修改 value 值trigger(); // 通知 Vue 重新解析模板}}})
}// 使用自定义 ref 函数
let content = myRef('测试鸭');

自定义 ref 实现防抖效果：

<template><input type="text" v-model="keyWord"><h3>{{ keyWord }}</h3>
</template><script>
import { customRef } from 'vue';
export default {name: "Home",setup() {// 自定义一个 ref 函数，名为：myReffunction myRef(value, delay) {let timer = null;return customRef((track, trigger) => {return {get() {console.log('有人读取了数据', value);track(); // 通知 Vue 追踪 value 的变化return value; // 返回 value 值},set(newValue) {clearTimeout(timer); // 清除上一次的延时执行// 延时执行修改数据timer = setTimeout(() => {console.log('有人修改了数据', newValue);value = newValue; // 修改 value 值trigger(); // 通知 Vue 重新解析模板}, delay)}}})}let keyWord = myRef('你好呀', 500);// 返回数据return { keyWord }}
}
</script>