了解过vue3的小伙伴们都非常的清楚,实现响应式所用到的API有ref()与reactive()两种,由于两个API的局限性都很高,很多时候我们都需要自定义Ref来实现一些需求。
这里,我以一个非常简单的小例子来实现一个功能,即输入框的数据与下面显示的数据相一致,我们很本能的就可以想到v-model嘛,这太容易了,确实,代码如下:
<script src="http://unpkg.com/vue@next"></script>
<div id="app">
<input v-model="data"/>
<h3>{
{data}}</h3>
</div>
<script>
const {createApp, ref} = Vue
const App = {
setup(){
let data = ref("refTest")
return {data}
}
}
createApp(App).mount('#app')
</script>
可以看到,这个问题很容易被解决了,但是,我们可以发现,只要我们输入框的数据一变,下面的数据立马跟着就变,现在我们的需求是,我们需要连续不断地输入数据,并且只有当数据输入完成的一秒钟之后,下面的数据才会发生变化,这个要怎么实现呢?
此时便需要自定义组件,customRef