Vue3-customRef的使用

读取数据前,需要先track() 告诉Vue数据msg很重要,你要对msg进行持续关注,一旦msg变化就去更新

修改数据后,需要trigger()收尾 通知Vue一下数据msg变化了

Vue3-customRef的使用_第1张图片

caf94c987df94b94ab1f8df7342b1f19.png

自定义ref如何防抖

Vue3-customRef的使用_第2张图片hooks中放入自定义ref

坐个比喻,

本来的ref,你就是你直接去车店,直接买车,都是车店做好了的,你只能选择他给你的,定死了,你没法有更细的要求

自定义ref,就好比你去车店,你说你要买什么车(要绑定的初始值),以及你有什么要求(例如本文的延时要求,也就是delay参数),给出这2个条件之后,车店会根据你的要求,返回一个车子给你,也就是帮你自定义ref过后的值(msg返回值)。

 

自定义ref,放置到hooks中,

Vue3-customRef的使用_第3张图片

Vue3-customRef的使用_第4张图片

给出要绑定的初始值("你好"),要延时的参数(delay),得到自定义ref的返回值赋值给msg。

Vue3-customRef的使用_第5张图片

 

 

你可能感兴趣的:(vue.js,前端,javascript)