vue 3.x customRef实现响应式变量防抖

最新推荐文章于 2024-07-24 09:31:05 发布

前端小懒虫

最新推荐文章于 2024-07-24 09:31:05 发布

阅读量282

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44494811/article/details/113103890

版权

本文探讨如何在Vue 3.x中利用customRef创建响应式变量，并结合防抖技术，优化性能。首先，我们将编写一个防抖函数，然后介绍如何在Vue组件中引入和使用这个防抖定制引用，以确保在高频触发的事件中，更新操作得到有效的节制。

摘要由CSDN通过智能技术生成

1.编写防抖函数

function useDebouncedRef(value,delay=500){
   
    let timeout=null
    //customRef 参数是一个工厂函数，返回get和set方法
    return customRef((track,trigger)=>{

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小懒虫

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

你知道vue3的customRef吗？你知道它和ref的区别吗？你知道它的应用场景吗？

m0_57202548的博客

04-04

470

是 ES11 中新增的运算符，表示当左边的操作数为 null 或 undefined 时，返回其右侧的操作数，否则返回左侧的操作数。customRef允许我们通过获取或设置一个变量的值时进行一些额外的操作，而不需要侦听这个变量进行额外的操作。是 Vue 3 中新增的 API，用于创建自定义 ref，并对其依赖项跟踪和更新触发进行显式控制。：通过控制依赖项收集和更新触发时机，可以实现防抖/节流功能。方法中调用，收集该 ref 所依赖的响应式数据。提供对依赖项跟踪和更新触发更细粒度的控制。

用 customRef 做一个防抖函数，支持 element 等UI库。

weixin_48967543的博客

04-03

153

这几天学习Vue的官网，看到 customRef 提供了一个例子，研究半天发现这是一个防抖函数，觉得挺好，于是把这个例子扩展了一下，可以用于表单子控件和查询子控件。需求技术资讯 https://www.secn.net/ v-model 基于 element-plus 封装表单控件，同时也要封装一下表单子控件，还有查询控件。由于 el-input 这类的组件，把 value 封装成了 v-model，所以无法把组件的属性直接设置给内部的 el-input。必须在内部设置一个变量，然后做“属性” &.

参与评论您还未登录，请先登录后发表或查看评论

vue3中如何定义响应式变量

泠泠似水

02-20

2196

vue3定义响应式变量

前端Vue篇之Vue3响应式：Ref和Reactive

最新发布

weixin_41978174的博客

07-24

590

在Vue3中，Ref和Reactive是用于处理响应式数据的重要工具。它们帮助开发者管理数据的变化并自动更新相关的视图。在Vue3中，响应式是构建交互式Web应用程序的核心概念。Ref和Reactive是Vue3中用于创建响应式数据的重要工具。

vue3笔记9之“customRef“防抖

空投在我怀里的博客

06-15

183

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果

Vue3 customRef自定义ref 实现防抖

XunLin233的博客

11-20

626

当我们在模板中读取使用自定义ref 定义的数据时就会调用get 函数，修改数据时就会调用set 函数。而set 函数中，参数newValue为value修改后的值，我们需要将新的值赋值给传入的value值，才能实现页面的响应式。原因就在于我们改变value值后触发get 函数后并没有去重新解析模板，set 也没有收到解析模板的命令。因此customRef 函数中又有两个参数，track 函数和trigger 函数。在这个函数中，我们有一个返回值，这个返回值是customRef 函数。

vue3.0 customRef

weixin_43294560的博客

07-25

3033

(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数 (2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象使用: import {customRef} from 'vue'; function useDebouncedRef(value) { return customRef((track, trigger) => { re

vue3响应式之ref、reactive、toRef、toRefs、toRaw

listcvc的博客

01-15

1046

vue3响应式之ref、reactive、toRef、toRefs、toRaw

Vue3-02 响应式API

多啦的博客

05-19

557

Vue3学习笔记-02 响应式API

vue3面试题：2024 最新前端 Vue 3

2401_84437170的博客

04-27

2173

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

Vue3组合式API之customRef实现防抖

认定的总要想办法去完成。

02-14

1761

什么是防抖？防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔，如果触发间隔小于设定的间隔，则清除原来的定时，重新设定新的定时；如果触发间隔大于设定间隔，则保留原来的定时，并设置新的定时；防抖的结果就是频繁的触发转变为触发一次使用customRef实现防抖 <template> <div> <input type="text" name="" id="" v-model="keyword"> <div>{{keyword}

Vue3系列——ref与reactive创建响应式变量

Freya的博客

06-07

783

vue3中创建响应式变量：ref与reactive

vue3知识点：customRef

刘大猫

07-18

1785

vue3知识点：customRef

Vue3全家桶 - Vue3 - 【2】声明响应式数据（ref + reactive + toRef + toRefs）

qq_48937489的博客

03-11

1261

reactive().valuerefreactive// 引入 ref 函数，来声明响应式对象importfrom'vue'// 使用 ref 函数来声明原始类型的数据源，具备响应式letref'Abc'// 更改账号，控制台查看最新值function// 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值+='='log// 使用 ref 函数来声明对象类型的数据源：具备响应式letrefsalary7000name'Jack'// 更改员工薪资，控制台查看最新值。

Vue3——响应式实现（ref、reactive）

mantou_riji的博客

07-24

4289

setup是Vue3中一个新的配置项，值为。eg：返回一个对象: App.vue eg2：返回的是在vue2中中的属性会通过原理最终包装成响应式数据_data。 vue3中为我们提供了两种包装响应式数据的方法：ref和reactive注意这里的ref和vue2中的ref不一样，这里是一个。上面使用setup包裹页面数据，但是这样编写出的数据不是响应式的，即数据改变页面不会被重新加载。从vue2中我们知道一个数据要实现响应式一定有对应的响应式得getter和setter方法，在vue3中通过帮我们生成响

【Vue3实践】（二）Vue3开发基础：响应式变量、双向绑定、计算属性、监听器

积木成林，聚沙成塔

03-18

2906

本篇主要是讲了VUE开发中经常会使用到的响应式变量、双向绑定的使用方式，并举例说明了计算属性和监听器之间的使用差别及各自的作用，有了本篇的基础，已经可以使用VUE做一些简单的开发了。需要注意这么几个细节： - 响应式与双向绑定的联系与区别，`v-model`的作用 - 计算属性的使用限制，生成的快照属性不能别其他功能修改 - 监听器`watch`与`watchEffect`的区别，`watchEffect`与`computed`的区别 - 监听器监听数据源为对象时需要注意两个问题：**深层监听**、`n

vue3.0-第七章之customRef

weixin_42845571的博客

08-11

136

1.customRef

Vue2.x响应式原理详解

Vue3.x引入了一些改进，比如支持动态添加对象属性的响应式，以及通过索引设置数组成员的响应式。Vue3.x的响应式系统基于Proxy，相比Vue2.x的`Object.defineProperty`更加灵活和强大。在Vue2.x中，当对象或者数组中...