Vue3——利用customRef API 对双向绑定的属性进行debounce(节流)操作

customRef:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。

思路:要写一个节流的ref(自定义一个ref),可根据customRef api重写一个自己的ref,我们需要通过customRef 跟踪依赖并在合适的时候触发更新。 

引入customRef,自定义一个函数,该函数需要接收到value,函数的返回值是返回一个我们自定义的customRef,将两个参数传入customRef,并在customRef函数中返回我们重写的逻辑(getter,setter,vue在处理的时候,会用get读取value,在value改变时调用set)。在getter函数中收集依赖,在setter中,定义一个定时器,使value更改、更新视图的时间往后,且需要在delay没到但还在更改value的时候,clear调之前的定时器,实现简单的节流。

引入自定义的ref,并使用,传入value和delay,双向绑定至input。

效果:简书传gif图动不了,只能截图看看效果了:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容