import { ref, reactive } from 'vue';
import useMsgRef from '../hooks/useMsgRef.js';
// 使用 Vue 提供的默认 ref 定义的响应式数据，数据一变，页面就更新
// const msg = ref("你好");
// console.log( msg ); // 数据变化页面也立刻发生变化
// 引入自定义 ref Hooks
// 使用 useMsgRef 来定义一个响应式数据且具有延迟修改效果
const { msg } = useMsgRef("", 2000);
console.log( msg ); // 数据变化两秒之后页面才发生变化
import { customRef } from 'vue';
// 自定义 customRef
// initValue 为页面中定义的字符串，delay 为间隔的时间（毫秒）
export default function(initValue, delay) {
// 使用 Vue 提供的customRef定义响应式数据
let timer;
// track(追踪)、trigger(触发)
let msg = customRef((track,trigger) => {
return {
// get 在 msg 被读取时调用
get() {
track();
return initValue;
},
set(value) {
clearTimeout(timer);
timer = setTimerout(() => {
initValue = value;
trigger(); // 通知Vue数据 msg 变化了
}, delay);
}
}
})
return { msg };
}
