vue3.0知识点总结（六）——自定义ref （customRef的用法）

作用：创建一个自定义ref,比对其依赖项跟踪和更新触发进行显示控制

 实现防抖效果：

get:用于读数据进行调用       set:用于修改数据时进行调用 

<template>
  <div>
    <input type="text" v-model="keyword" />
    <h3>{{ keyword }}</h3>
  </div>
</template>
<script>
import { ref, reactive, toRaw, customRef } from "vue";
export default {
  setup() {
//自定义函数内部实现
    function myref(value) {
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            //  读属性调用get
            console.log("从myref中读取数据我把${value}");
            track(); //通知vue追踪数据的变化
            return value;
          },
          set(newvalue) {
            //修改数据低啊用set
            console.log(`修改了数据${newvalue}`);
            value = newvalue; //进行修改数据
            clearTimeout(timer); //进行防抖
            timer = setTimeout(() => {
              trigger(); //通知vue重新解析模板
            }, 1000);
          },
        };
      });
    }
    let keyword = myref("hellow"); //使用程序员自定义ref
    return { keyword };
  },
};
</script>

刚启动时：get调用两次进行读数据

 当进行数据修改时：调用set函数，并且通过trigger()->track()进行数据的重新模板加载，实现响应式，

 

 为了实现输入过快出现的抖动情况，