（尚硅谷）Vue笔记-------36

customRef

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

 

我们这里是使用的vue内置的ref，我们现在不这么去做，去使用我们程序员自己写的ref:

我们的ref就是一个容器，所以我们的myRef也可以理解一个容器，去存放数据，只不过myRef只不过是借助函数来实现的。可以这么去理解：

 

可以成功获取数据。

但是我们的自定义ref也不是所有的东西都自己去写，我们就会引用vue给我们提供的customRef:

 

 

我们为什么读取了两次信息，这是因为我们的输入框input和我们的插值语法两个地方都对get方法进行了调用，所以显示两次信息。但是现在我们的set方法中是空白的，所以我们现在的修改实时显示是不好使的：

 

所以我们现在就要手动去写set方法。

 

 

我们现在已经可以对数据进行修改了，我们就要去准备实现页面的同步渲染：

我们修改前的执行顺序：

我们先显示插值语法，然后调用了get方法读取默认值。 

 

我们修改了数据之后：

插值语法调用get方法读取默认值，input输入框输入新的值，再次调用get方法，因为这时值已经改变了，所以set方法也被调用了，之后set方法中的trigger方法起到了作用让插值语法重新解析模板。再次回到get方法，get方法的track方法执行，显示出新的值。

  

现在我们想做一个什么功能呢，就是我们每次去输入数据的时候，都让它等一等再执行：

因为我们的自定义ref是在ref中去写逻辑的，所以我们就可以去在我们的自定义ref中添加定时器去完成这件事情：

 

我们也可以把时间设置为参数：

 

这个案例在vue3官网中也有，这个案例去学习customRef还是比较好的。