Vue3中自定义ref的实现

了解过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