Vue学习笔记-Vue3中的customRef

作用

创建一个自定义的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 timer
          return{
            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)
            }
          }
      })
    }
    //写一个自定义的myRef
    let keyword = myRef('hello')
    return{
      keyword
    }
  },
}
</script>

<style>

</style>