Vue3中customRef的使用

如其名，自定义Ref，可想而知它一定会返回一个Ref对象，那么开始吧

这里我们先定义这么一个函数，里面封装的是我们自己定义的ref

模板中

页面上

上图所示，我们能读取，但是真能改变值吗？

答案是不能！有人就会说了，我明明把最新的值给value赋值了啊，咋能够呢？

这么说吧，你呢确实赋值了，但是get没有重新执行，模板呢还是未修改之前的模板，也就是说你没有通知Vue去重新渲染模板

那么如何通知Vue去重新解析模板呢？

customRef中的回调会接收底层的两个参数，一个是track，也就是追踪，你说它追踪什么呢？欸，追踪的就是get返回值的改变，它追踪到了才会反应到页面上来，另一个是trigger，也就是触发，触发啥？触发开关，开关干嘛的？通知Vue去重新解析模板

问题来了，这两个参数啥前用？你想啊，当你的值改变完之后是不是得通知Vue去重新解析模板？重新解析完模板之后是不是会重新调用get读取值？那么读取返回值之前是不是得先追踪到变化？好了，代码上见！

结果如下：最终拿到这个改变后的值了

有人又说了，这有啥用？我直接用官方给的ref不香吗？

那咱们做个实验，你说我要是一直往输入框中输入东西，会发生什么呢？

好家伙，好么，这得耗多少资源，一次输入就响应一次，当真看恐怖啊！

问题来了，如何解决？

有人就说，你咋啷个笨？你就开个定时器不就可以了？

哟呵，变异了，错的离谱了，差点定时器开关

加上定时器开关

模板中

页面上，触发页面更新的时机变成了，连续按键停止点后的500ms

但是有点不足，延迟时间写死了，改需求

完事！这就是防抖！