利用Vue3的新API(customRef)实现防抖效果

最新推荐文章于 2024-07-03 19:33:52 发布

Ashley的成长之路

最新推荐文章于 2024-07-03 19:33:52 发布

阅读量452

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript vue3 customRef

本文链接：https://blog.csdn.net/weixin_40297452/article/details/136453146

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

customRef是创建一个自定义的 ref，然后显式声明对其依赖追踪和更新触发的控制方式。因为ref是直接更新的，数据修改会马上更新，而customRef可以认为控制更新的过程，比如可以利用这个api控制空格输入限制、数据更新速度控制、违规内容、emoji输入限制等等

下面用customRef实现一个数据更新带防抖效果的hook

import { customRef } from "vue"

export default function <T>(initValue: T, delay: number = 1000) {
  let timer: number
  let delayValue = customRef((track, trigger) => {
    return {
      get: () => {
        track() //核心，告诉Vue持续关注这个值
        return initValue
      },
      set: (value: T) => {
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //核心，告诉Vue持续关注这个值要更新了
        }, delay)
      },
    }
  })
  return { delayValue }
}

使用这个hook

//.vue文件
<template>
    <div>{{ name }}</div>
    <input v-model="name" placeholder="请输入名称">
</template>

<script setup lang='ts' name='Layout'>
import useDelayRef from '@/hooks/useDelayRef';
let { delayValue: name } = useDelayRef<string>('Ashley', 3000)
</script>

ps：简单记录，如有不恰当之处，欢迎交流