vue3中ref，triggerRef，customRef，shallowRef的区别

在 Vue 3 中，ref 和 shallowRef 都是用来创建响应式数据的函数，它们之间的主要区别在于它们对于传入的对象的处理方式不同。

1.ref 用于创建一个包装器对象，可以将基本类型值或对象转换为响应式数据。例如：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

ref 的作用就是将普通的数据类型（例如数字、字符串、布尔值等）转换为响应式数据类型。ref 内部使用了 ES6 的 Proxy API，以便能够追踪数据的变化并更新相关的视图。
2.triggerRef 是一个用于手动触发包装器对象的更新的函数。当你需要在组件之间共享一个 ref 对象时，你可能需要手动更新这个对象的值。使用 triggerRef 可以手动触发这个包装器对象的更新。例如：

import { ref, triggerRef } from 'vue'

const count = ref(0)

// 触发 count 的更新
triggerRef(count)

3.customRef 是一个用于创建一个自定义的响应式数据的函数。它接收一个对象作为参数，这个对象必须包含两个方法：get 和 set。get 方法用于获取这个数据的当前值，而 set 方法用于设置这个数据的新值。使用 customRef 可以创建更加灵活的响应式数据。例如，你可以在 get 方法中添加一些额外的逻辑来动态计算这个数据的值：

import { customRef } from 'vue'

const myRef = customRef((track, trigger) => {
  let value = 0

  return {
    get() {
      track() // 声明这个函数需要被追踪
      return value
    },
    set(newValue) {
      value = newValue
      trigger() // 声明这个函数需要触发更新
    }
  }
})

4.shallowRef 与 ref 相似，但是它只会将传入的对象的第一层属性转换为响应式数据，而不会递归地将嵌套对象的属性都转换为响应式数据。这就意味着，如果你对于一个对象属性进行更改，那么组件的响应式更新可能会失效，因为这个对象并没有被转换为响应式数据。例如：

import { shallowRef } from 'vue'

const user = shallowRef({
  name: 'John',
  age: 30
})

console.log(user.value.age) // 30

user.value.age++
console.log(user.value.age) // 31

shallowRef 在处理嵌套对象的情况时，可能更加高效，因为它不需要递归地将整个对象都转换为响应式数据。但是，在使用 shallowRef 时需要小心，因为它可能会导致一些响应式更新的问题。如果你需要将一个对象的所有属性都转换为响应式数据，那么应该使用 ref 而不是 shallowRef。