Vue 3教程 - 自定义ref

什么是Custom Ref

在Vue 3中，可以使用Ref来实现reactive。但其缺点就是缺乏更加灵活的控制方式。比如：要实现当一个输入框数据发生变化的时候，延迟一秒钟再更新另一个文本框。这时就需要自定义Ref了。其实这个自定义Ref就像是自动挡车，自己需要做的事情更多，但同时能够获得最大的灵活性。

自定义Ref的实现

这个示例源于Vue 3官网：

JavaScript

import { ref, customRef } from 'vue'

// ...

setup() {
  function myRef(value, delay) {
    let timer

    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newValue) {
          clearTimeout(timer)
          timer = setTimeout(() => {
            value = newValue
            trigger()
          }, delay)
        }
      }
    })
  }

  let name = myRef('Paul', 200)

  return {
    name
  }
}