使用customRef实现防抖

customRef函数

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制

它需要一个工厂函数，该函数接收track和trigger函数作为参数

并且返回一个带有get和set的对象

在进行双向数据绑定的时候，输入框输入的内容与下方文字显示的内容是同步变化的

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

<script>
import {ref} from "vue"
  export default {
      setup(){
        const input=ref("hello")
        return {
            input
        }
      }
  }
</script>

可以使用vue提供的customRef函数实现防抖操作

自定义个一个文件debounce.js

import { customRef } from "vue";
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)
            }
        }
    })
}

使用的使用引入这个文件，不在使用ref定义变量

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

<script>
import debounceRef from "./debounceRef.js"
  export default {
      setup(){
        const input=debounceRef("hello")
        return {
            input
        }
      }
  }
</script>

 

 此时就使用customRef函数实现了防抖操作