vue3中的自定义ref

在Vue 3中，自定义ref可以通过customRef函数来实现。customRef函数接收一个带有两个参数的对象作为参数，分别是get回调函数和set回调函数，用于控制ref的读写操作。

下面是一个简单的示例，展示如何创建一个可以存储对象及其属性的自定义ref：

import { customRef } from 'vue'

function useObjectRef(obj) {
  return customRef((track, trigger) => ({
    get() {
      track()
      return obj
    },
    set(value) {
      obj = value
      trigger()
    }
  }))
}

// 使用
const objRef = useObjectRef({ name: 'Tom', age: 18 })
console.log(objRef.value.name) // 输出 "Tom"
objRef.value.age = 20 // 修改属性

在上面的示例中，customRef函数接收一个回调函数，这个回调函数的返回值是一个对象，这个对象包含get和set方法，用于控制自定义ref的读和写操作。get方法会在value被读取时调用，而set方法会在value被修改时调用。

track函数用来追踪依赖关系，当对象的属性被访问时，Vue 3会使用track函数追踪这个访问行为，这些访问行为将会被用于计算依赖项。而trigger函数用于触发更新，当修改对象的属性后，Vue 3将使用trigger函数通知相关组件进行更新。