Vue3 组合式Api之customRef实现防抖功能

前言

什么是防抖？
防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔，如果触发间隔小于设定的间隔，则清除原来的定时，重新设定新的定时；如果触发间隔大于设定间隔，则保留原来的定时，并设置新的定时；
防抖的结果就是频繁的触发转变为触发一次。

使用customRef实现防抖

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。该函数有两个参数： track 和 trigger 。
使用自定义 ref 通过 v-model 实现防抖示例：

<template><input type="text" v-model="name" /><h3>{{ name }}</h3>
</template><script>
import { defineComponent, customRef } from 'vue'export default defineComponent({setup() {// const name = ref('hello')    // 此时ref是Vue提供的ref// 自定义的ref  名为：myRef（ref本质就是一个函数）function myRef(value, delay) {let timerreturn customRef((track, trigger) => {return {get() {// 通知vue追踪数据value的变化track()return value},set(newValue) {clearTimeout(timer)timer = setTimeout(() => {value = newValue// 通知vue去重新解析模版trigger()}, delay)},}})}const name = myRef('', 500)return {name}},
})
</script>

效果展示：

1650460871249670

Vue3 组合式Api之customRef实现防抖功能相关推荐

vue3组合式api基础（常用）
vue3组合式api基础(常用) 前言:vue3中尽量不要使用'this',最好使用组合式api(Composition API),如果使用uni-app的,vue3只支持ios>=10(201 ...
Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是: Top-level 'awa ...
Vue2选项式API和Vue3组合式API的区别
文章目录 Vue2选项式API和Vue3组合式API的区别响应式处理组件生命周期组件通讯其他差异编译器的变化 TypeScript 静态类型提升 Vue2选项式API与Vue3组合式API ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
谈谈vue3组合式api的优势
vue2: options API 配置式使用传统Options API(配置式API)中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 . vue3: com ...
关于Vue3组合式API(Composition API)的个人理解
首先,关于组合式API现已有众多大佬发布了相关介绍及相关教程,但是个人在学习过程中还是花了比较多的时间去理解 " 组合式API " 这个概念. 因为目前搜索引擎排的比较前面的文章其 ...
Vue3 组合式API初体验
目录一.背景二.什么是组合式API(Composition API ) 组合式API全景为什么要引入组合式API `mixins` 的方式域插槽的方式组合式API的方式结论组合式API存 ...
Vue3 -- 组合式API
组合式API 组合式api(Composition API)算是vue3对我们开发者来说非常有价值的一个api更新,我们先不关注具体语法,先对它有一个大的感知 1. composition vs op ...
vue3 组合式API与响应性的概念理解和简析
目录 1. 组合式API简介 1.1. 组合式API是为了实现关注点抽离 1.1.1. 什么是关注点? 1.1.2. 为什么需要关注点抽离? 1.1.3. 组合式API是为了实现关注点抽离 2. 组合 ...

Vue3 组合式Api之customRef实现防抖功能

前言

使用customRef实现防抖

效果展示：

Vue3 组合式Api之customRef实现防抖功能相关推荐

最新文章

热门文章