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 函数，名为：myRef function 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>
