Vue3中customRef的用法

customRef作用：

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

        如果要使用，记得是在自定义的 ref 中返回一个 customRef，而 customRef 也要返回一个对象

customRef参数:

        customRef的两个参数分别是用于追踪的 track 与用于触发响应的 trigger

代码演示：

        我们通过一个小的功能来体现customRef的用法 在页面输入框中输入文字 1秒后下面h1标签显示最新的数据 类似于防抖的功能 

 

        我们在代码中定义了一个myRef方法并设置了返回值，接着我们声明了一个keyWorld变量通过调用 myRef方法并传递了一个参数 来接收方法的返回值 并将接收到的值返回出去 在模板中使用

         我们可以看到在方法中返回了customRef的调用  在customRef参数中传递了一个回调函数 在回调函数中我们返回了一个对象 对象中配置了两个方法get和set 这也是customRef方法所规定的 

        customRef的两个参数分别是用于追踪的 track 与用于触发响应的 trigger

        只要是读取了数据就走get方法 修改数据就走set 方法

        我们在get方法里返回了myRef接收到的值 并调用track() 追踪数据的变化  
        我们在set方法里会收到一个最新的值newValue 我们将修改后的最新的值赋值给之前的value 设置定时器 调用trigger() 一秒后通知Vue去重新解析模板

        为了防止每次修改都处触发一个新的定时器 我们在set函数外声明了一个变量来接收定时器返回的id 在下一次修改之后 我们先清除上一次还没有执行的定时器 在调用trigger() 通知Vue去重新解析模板