利用自定义Ref实现防抖

防抖如何与 Vue 中的响应式数据做结合

在Vue中使用 v-model 会实时改变数据，如下图：

因此，如果需要数据延迟响应，需要对数据输入做出防抖。

防抖函数+输入事件处理

先看效果

实现代码如下：

App.vue

<script setup>
import { ref } from "vue";
import { debounce } from "./debounce";
const inputText = ref("");
const inputHandler = (e) => {
  inputText.value = e.target.value;
};

const debounceHandler = debounce(inputHandler, 500);
</script>

<template>
  <div class="container">
    <input type="text" @input="debounceHandler" />
    <p class="text">{{ inputText }}</p>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
}

.container input {
  height: 24px;
  width: 400px;
}

.container input:focus {
  outline: 2px solid #ff00ff;
}

.container .text {
  color: #fff;
  font-size: 16px;
  margin-top: 16px;
  width: 400px;
}
</style>

debounce.js

export function debounce(func, delay = 1000) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

使用自定义ref

自定义ref——debounceRef.js

import { customRef } from "vue";
export function debounceRef(value, delay = 1000) {
  return customRef((track, trigger) => {
    let timer;
    return {
      get() {
        // 依赖收集
        track();
        return value;
      },
      set(newValue) {
        // 清理定时器
        clearTimeout(timer);
        timer = setTimeout(() => {
          // 更新值
          value = newValue;
          // 派发改变
          trigger();
        }, delay);
      },
    };
  });
}

App.vue

<script setup>
import { debounceRef } from "./debounceRef";
const inputText = debounceRef("", 1000);
</script>

<template>
  <div class="container">
    <input type="text" v-model="inputText" />
    <p class="text">{{ inputText }}</p>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
}

.container input {
  height: 24px;
  width: 400px;
}

.container input:focus {
  outline: 2px solid #ff00ff;
}

.container .text {
  color: #fff;
  font-size: 16px;
  margin-top: 16px;
  width: 400px;
}
</style>