VUE3-用customRef函数来自定义ref（17）

<template>
  <input type="text" v-model="keyword">
  <h2>{
   
   { keyword }}</h2>
</template>

<script>

import {
     
     customRef} from "vue";

export default {
     
     
  name: 'App',
  setup() {
     
     
    //自定义ref
    function myRef(value, delay) {
     
     
      let timer
      //通过customRef函数去实现自定义
      return customRef((track, trigger) => {
     
     
        return {
     
     

          get() {
     
     
            console.log(`有人读取了value的值`)
            track() //告诉Vue这个value值是需要被“追踪”的
            return value //一上来调用get来显示初始值
          },

          set(newValue) {
     
     
            //在修改前如果有定时器（定时时间内多次修改），那么先关闭这个定时器，再继续修改（实现防抖效果）
            clearTimeout(timer)
            //修改数据后延迟显示
            timer = setTimeout(() => {
     
     
              console.log('value值被修改成了：', newValue)
              value = newValue //value也是一个变量，每次修改数据后让value的值为最新修改后的值
              trigger() //通知Vue去解析模板
            }, delay)
          }

          /*修改数据后的输出：
          * value值被修改成了： hello1
          * 有人读取了value的值
          * 有人读取了value的值
          * */
        }
      })
    }

    let keyword = myRef('hello', 500)

    return {
     
     
      keyword
    }
  }
}
</script>