[JavaScript知识库]Vue3customRef使用方法

使用场景

ref函数可以创建一个响应式数据，有时我们希望可以自己控制数据的触发响
应，就可以使用customRef函数自定义一个ref

写法

自定义ref的本质就是返回一个customRef函数，即rerturn customRef()

customRef接收两个参数

• 用于追踪的track，通知Vue去追踪value的变化
• 用于触发响应的trigger，通知Vue去重新解析模板

customRef函数需要返回带有get和set和对象

举个栗子

官方例子，带防抖功能的自定义ref

import {customRef} from "vue";

export default {
  setup() {
    // 自定义一个ref，名为myRef
    function myRef(value, delay) {
      let timeout
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`有人从myRef这个容器中读取数据了，把${value}给他`)
            track() // 通知Vue追踪value的变化
            return value
          },
          set(newValue) {
            console.log(`有人把myRef这个容器中数据改为了${newValue}`)
            timeout = setTimeout(() => {
              value = newValue
              trigger() // 通知Vue去重新解析模板
            }, delay)
          }
        }
      })
    }

    const word = myRef('hello', 500)

    return {
      word,
    }
  }
}