【6月日新计划更文活动】第24天

customRef

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

• 实现防抖效果：

  <template>
    <input type="text" v-model="keyWord">
    <h3>{{ keyWord }}</h3>
  </template>
  
  <script>
  import { clear } from "console";
  import { ref, customRef } from "vue";
  export default {
    nam: "App",
    setup() {
      // 自定义一个ref ———— 名为：myRef
      function myRef(value) {
        let timer
        console.log('--myRef--:', value)
        // const x = customRef()
        // return x
        return customRef((track, trigger) => {
          return {
            get() {
              console.log(`有人从myRef这个容器中读取数据了|，我把${value}给他了`)
              track() // 通知Vue追踪Value的变化 (提前和get商量一下，让他认为这个value是有用的)
              return value
            },
            set(newValue) {
              console.log(`有人从myRef这个容器中数据修改为:${newValue}了`)
              clearTimeout(timer)
              timer = setTimeout(() => {
                value = newValue
                trigger() // 通知Vue去重新解析模版
                return newValue, value
              }, 500);
            }
          }
        })
      }
  
      // let keyWord = ref("hello") // 使用Vue提供的 ref
      let keyWord = myRef("hello") // 使用程序员自定义的 ref
  
      return {
        keyWord,
      };
    },
  };
  </script>