Vue3的customRef()

• 作用：创建一个自定义的 ref ，并且对 其依赖项进行跟踪   和  更新触发  进行显式控制

下面是一个案例

• 实现输入框输入后，下面的h4晚一秒进行显示

<template>
  <div class="App">
    <input type="text" v-model="keyword" />
    <h4>{{ keyword }}</h4>
  </div>
</template>
 
<script setup>
import { customRef } from 'vue'
 
// 这个是使用Vue提供的ref
// let keyword = ref('hello')
 
// 这个是自定义 ref
let MyRef = (val, t) => {
  let timer
  // 利用 customRef(callback) 自定义 ref
  return customRef((track, trigger) => {
    return {
      // 查看
      get() {
        track() // 追踪，通知Vue追踪val的变化(提前和get商量一下，让他认为这个val是有用的)
        return val
      },
      // 修改
      set(value) {
        // 晚1s再修改值
        clearTimeout(timer)
        timer = setTimeout(() => {
          val = value
          trigger() // 通知Vue重新去重新解析模板
        }, t)
      },
    }
  })
}
 
// 自定义ref，并往里面传入两个参数，初始值和定时器时间
let keyword = MyRef('hello', 1000)
</script>