vue3 customRef自定义ref

只要用ref定义的数据就是响应式的，数据改变视图会马上更新，如果有个需求，当数据改变后，过几秒再更新视图，或者改变后去发送请求等操作，就需要使用customRef自定义ref了。
我将其文件定义在hooks文件夹下了

//这是自定义ref的组件
import {customRef} from 'vue'

export default  function (initV: string, delay: number) {
  let timer: number;
  //使用vue提供的customRef定义响应式数据  
  let msg = customRef((track, trigger) => {
  return {
      get(){
          track(); //告诉vue数据msg很重要，你要对msg进行持续关注，一旦其变化就要更新
          return initV;
      },
      set(val){
        clearTimeout(timer)
        timer = setTimeout(() => {
          initV = val;
          trigger(); //通知vue一声，数据msg变化了 
        }, delay)
      },
}
  })
  return msg
}

//父组件使用
import MsgRef from './hooks/useMsgRef'
let {msg} =  MsgRef('12', 1000)
 <div>{{ msg}}</div>
 <input type="text" v-model="msg">
 //此时只要修改input框中的内容，过1秒后视图才会更新