【Vue3】自定义ref(customRef）的用法和示例（转）

 

<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>

本文转自：

vue3.0知识点总结（六）——自定义ref （customRef的用法）_Mr.指尖舞者的博客-CSDN博客_自定义ref自定义ref （customRef的用法）https://blog.csdn.net/qq_56989560/article/details/125018330