customRef 自定义Ref

customRef 自定义Ref

自定 Ref

1. 它的作用就是你的响应式数据，可以进行自定义的处理（下面的示例就是一种简单的处理）

防抖示例

• 先创建个 js文件

import { customRef } from "vue";

// track   : 来决定什么时候来收集依赖
// trigger ：用来决定什么时候触发和更新以来
export default function (value) {
  let time = null;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newvalue) {
        clearTimeout(time)
        time = setTimeout(() => {
          value = newvalue;
          trigger();
        }, 1000);
      },
    };
  });
}

• 然后引用

<template>
  <div>
    <input type="text" v-model="message"/>
    {{message}}
  </div>
</template>

<script>
import uu from "./des"
export default {
  setup(props, { attrs, slots, emit }) {
    let message = uu("");
    return {
      message,
    };
  },
};
</script>