La referencia personalizada Vue anti-vibración se da cuenta de la caja de entrada anti-vibración

       Antivibración (rebote): cuando el evento se activa continuamente, la función de procesamiento de eventos solo se ejecutará una vez si el evento no se activa nuevamente dentro de un cierto período de tiempo. Si el evento se activa nuevamente antes de que llegue el tiempo establecido, el tiempo se reiniciará.

      A continuación, lo llevaré paso a paso para analizar cómo lograr el antivibración de entrada definitivo,

      Primero, debe desensamblar el modo v de enlace bidireccional de entrada en un valor y un evento de entrada, registrar una función debUpdata en el evento, obtener el contenido de entrada de entrada en debUpdata y asignarlo a texto, que es similar al modo v de escritura a mano, el código es el siguiente:

<template>
  <div class="hello">
    <input :value="text" @input="debUpdata" />
    <p>{
   
   { text }}</p>
  </div>
</template>

<script>
<script setup>
  import{ref} from 'vue';
  const text =ref('');
  const debUpdata=(e)=> {
  this.text = e.target.value;
}
</script>

       La operación anti-vibración específica se puede realizar en la función debUpdata. El llamado anti-vibración no es más que retrasar la ejecución de los cambios de datos, así que defina un temporizador en debUpdata, borre el temporizador cada vez que se ejecute la función y luego cambie el valor del texto después de usar setTimeout durante un segundo para lograr la anti-vibración más básica. el código se muestra a continuación:

 debUpdata(e) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.text = e.target.value;
      }, 1000);
    }

       Si necesita escribir esta función cada vez para la entrada antivibración, será algo problemático, entonces, ¿cómo optimizarla y separarla en una función antivibración separada?

Cree un nuevo archivo debounce.js para encapsular una función de rebote 

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

Después de la encapsulación, llámelo cada vez que se use:

<template>
  <div class="app">
    <input :value="text" @input="debUpdata" />
    <p>{
   
   { text }}</p>
  </div>
</template>

<script setup>
import { debounce } from "./debounce";
import{ref} from 'vue';
const text=ref('');
const update=(e)=>(text.value=e.target.value);
const debUpdata=debounce(update,1000);
</script>

       Aunque el efecto se realiza, se debe hacer referencia a él cada vez que se usa y luego usar debUpdata para llamar a una función de actualización real. Si todos los cuadros de entrada deben ser anti-vibración, será un poco problemático. A continuación, ¡continuemos optimizando el código anterior! !

¿Cuál es la referencia de vue?

         Se imprime como un objeto RefImpl y hay un valor en el objeto, que está definido por Object.defineProperty. Después de la definición de Object.defineProperty, se generará una función get y set. Para obtener más detalles, consulte el documento oficial de Object.defineProperty. Es decir, el código fuente del método ref proporcionado por vue contiene get y set. Además, vue responde. Es para notificar al lugar utilizado anteriormente para actualizar la respuesta   . Entonces, también podría hacer una suposición audaz de que la estructura de la función ref debería ser similar:

function ref(value) {
    {
        get(){
            // 依赖收集 track()
            return value;
        },
        set(val){
            //派发更新 trigger()
            value = val;
        }
    }
}

       Si desea implementar actualizaciones de datos retrasadas, puede retrasar directamente las actualizaciones de datos, lo que equivale a retrasar las actualizaciones de distribución establecidas en la ref. ¿Es necesario reescribir manualmente el código fuente de vue para lograr la antivibración? Por supuesto que no, vue nos proporciona una entrada de referencia personalizada llamada customRef  , que puede personalizar los métodos get y set

Use customRef para declarar la función debounceRef para personalizar get y set

import {customRef} from 'vue'
export function debounceRef(value,delay=1000){
    // return ref(value) //原始get set
    return customRef(()=>{
        return {
            get(){
                // 依赖收集 track()
                return value;
            },
            set(val){
                //派发更新 trigger()
                value = val;
            }
        }
    })
}

      En primer lugar, además de devolver valores, get también necesita recopilar dependencias. Con respecto a la recopilación de dependencias, Vue ha tenido esto en cuenta. Pasó un parámetro llamado track, que es un método. Siempre que se llame a este método, recopilará automáticamente las dependencias. Los colegas también pasaron un parámetro llamado disparador. Siempre que se llame al método de disparo, se activará la actualización del despacho;

 referencia vs referencia personalizada

todos los códigos

import { customRef } from 'vue'
export function debounceRef(value, delay = 1000) {
    let timer;
    // return ref(value) //原始get set
    return customRef((track, trigger) => {
        return {
            get() {
                // 依赖收集 track()
                track();
                return value;
            },
            set(val) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    //派发更新 trigger()
                    value = val;
                    trigger()
                }, delay);
            }
        }
    })
}

Instrucciones

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

<script setup>
import { debounceRef } from "./ref";
const text=debounceRef('');
</script>

¡Siente la comparación antes y después! !

 Bienvenidos a todos a dejar un mensaje para comunicarse.