作用

创建一个自定义的ref，并对其依赖项的更新和触发进行显式控制

案例

描述：向输入框中输入内容，在下方延迟1秒展示输入内容

代码：

<template><input type="text" v-model="keyword"><h3>{{keyword}}</h3>
</template><script>
import {customRef} from 'vue'
export default {name: 'App',setup(){function  myRef(value){return customRef((track, trigger)=>{let timerreturn{get(){console.log('正在读取数据...:',value)//通知vue追踪value的变化track();return value},set(newValue){console.log('数据发生改变，新数据为：',newValue)clearTimeout(timer)// //将新值赋给value// value = newValue;// //通知vue重新解析模板// trigger();timer = setTimeout(()=>{value = newValue;trigger();},1000)}}})}//写一个自定义的myReflet keyword = myRef('hello')return{keyword}},
}
</script><style></style>