【vue3学习笔记】customRef;provide与inject;响应式数据的判断-课程 P161节 《customRef》笔记

时间:2024-02-26 07:25:17

通过实现一个小例子来学习customRef:在输入框中输入内容时,底下的h3标签延迟一秒同步显示输入框中输入的内容。

customRef使用方法:调用customRef方法时,需要传入一个函数,此函数接收两个方法为参数:track和trigger。同时此函数需要返回一个对象,该对象中需要定义两个函数:get和set:

在这里插入图片描述

函数myRef接收到的参数value相当于一个变量,在函数中也可以修改它的值。在set函数中,将新的值赋给了这个value,然后执行trigger方法,trigger方法会通知vue重新解析模板,此时模板中用到数据的地方将重新读取数据,即重新执行get方法获取数据:

在这里插入图片描述

代码写到这里时,发现功能还没有实现,修改输入框中的内容时,下面h3中的内容仍然不变。这是因为:get中没有调用track。
整个流程为:当修改输入框中的数据时,触发set,将新值赋给了老值,并调用trigger通知vue重新解析模板;当模板重新解析时,读取keyWord的值,于是到get中获取新值,但由于没有调用track方法来通知get追踪这个数据,所以h3的数据不改变。
在get方法里加上track()调用后,h3的数据可以同步更新了:

在这里插入图片描述

修改数据时的输出:

在这里插入图片描述

使用setTimeout实现延迟同步数据:

在这里插入图片描述

但这样写存在bug,当快速输入时会设置很多定时器同时开启并工作,导致输入内容不准确。修复:通过在全局设置一个timer,在set中设置新值之前清理掉定时器,然后重新设置新的定时器,这样就保证了每次触发set,都会先清理掉之前的定时器,重新设定新的定时器,这样就保证了只有一个定时器在工作,相当于一个简单的防抖效果:

在这里插入图片描述
注意:
1、