customRef

MagnumHou 2023-03-03 11:28:07

课时名称	课时知识点
customRef	customRefcustomRefcustomRefcustomRefcustomRef

...全文

114 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

但是我们发现，当过快输入时，值出现了诡异的变动，会突然卡一下，这是因为，每次改变数据时，都会开启一个定时器，但是定时器却并没有清除，这就导致累计了多个定时器才会出现这种情况。在 ref() 中，在get 中收集依赖，在 set 中分发依赖，按这个模式，我们在 customRef() 中的 get 和 set 中也应该收集或分发。这是因为数据只是发生了变更，但是并没有实现依赖追踪和触发更新，这个时候，我们在看看 ref() 的源码。到了这里，其实我们就完成了与第一步同样的效果：不延迟，直接同步展示。

customRef是Vue3提供的一个高级响应式API，用于创建自定义行为的ref对象。它允许开发者自定义ref的 getter 和 setter 逻辑，从而实现特殊的响应式需求。核心特性自定义响应式行为：可以控制数据读取和修改的逻辑完全控制依赖追踪：手动决定何时触发依赖收集和更新通知灵活性高：可实现防抖、节流、延迟更新等高级功能与普通ref兼容：创建的对象可以像普通ref一样使用工作原理customRef接收一个工厂函数作为参数，该函数返回一个包含get和setget()

customRef是 Vue 3 中的一个高级响应式 API，用于创建自定义的响应式引用（ref），允许开发者对依赖追踪和更新触发过程进行细粒度控制。它通过一个工厂函数接收track和trigger两个函数，返回一个包含get和set方法的对象，从而实现灵活的响应式逻辑。‌。

customRef的强大之处：自定义响应式逻辑 customRef是Vue 3提供的强大工具，允许开发者完全自定义ref的get/set行为。与标准ref相比，它能够实现：高级控制：可以在值读取(get)和修改(set)时插入自定义逻辑特殊场景处理：如防抖节流、本地存储同步、值验证、格式转换等可复用性：可封装为hooks供多处复用（如示例中的延迟更新功能）基本结构是通过工厂函数返回包含get/set方法的对象，配合track()追踪依赖和trigger()触发更新。典型应用包括搜索框防抖、计数器范围

vue3知识点：customRef

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

vue.js前端框架html5 企业社区天津·河西区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

核心使命：为IT从业者和技术爱好者提供一个优质的学习、交流和分享平台，促进技术创新和成长。
注意事项：请保持尊重、友善的交流环境，遵守社区规则，禁止发布违法、侵权、低俗或有害信息。
激励机制：为了鼓励积极参与社区的用户，我们会设置积分和勋章系统，支持高质量的原创内容和有益的互动。
感谢您的加入，期待与您一起在CSDN社区共同探索技术，交流经验，共同成长！

试试用AI创作助手写篇文章吧

+ 用AI写文章