Vue3 响应式API：高级函数（二）

shallowRef()

• shallowRef 是一个特殊的 ref 创建函数，它允许你创建一个只追踪顶层属性变化的响应式引用。与 ref 不同的是，shallowRef 创建的响应式引用对其内部值的深层嵌套属性是不敏感的，也就是说，只有当 shallowRef 的 .value 被一个新对象替换时，Vue 的响应式系统才会追踪这个变化。
• shallowRef 的主要作用是创建一个只对其顶层属性敏感的响应式引用。这在某些场景下非常有用，比如当你想要引用一个大型对象或数组，并且只需要关心该对象或数组的引用变化，而不关心其内部属性的变化时。但是，请注意不要意外地修改其内部属性，因为这可能不会触发视图更新。

import {
    shallowRef } from 'vue';  
  
// 创建一个 shallowRef  
const shallow = shallowRef({
     
  nested: {
     
    prop: 'Hello Vue 3!'  
  }  
});  
// 修改 shallowRef 的顶层属性（即引用变化），这将触发视图更新  
shallow.value = {
     
  newNested: {
     
    prop: 'New value!'  
  }  
};  
// 尝试修改 shallowRef 的嵌套属性（内部对象的变化），这不会触发视图更新  
shallow.value.nested.prop = 'This change will not trigger a view update.';

triggerRef()

• 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
• 如果你确实在某个地方看到了 triggerRef() 这样的函数，那么它可能是某个库或应用程序中定义的自定义函数，而不是 Vue 3 官方 API 的一部分。

const shallow = shallowRef({
   
  greet: 'Hello, world'
})

// 触发该副作用第一次应该会打印 "Hello, world"
watchEffect(() => {
   
  console.log(shallow.value.greet)
})

// 这次变更不应触发副作用，因为这个 ref 是浅层的
shallow.value.greet = 'Hello, universe'

// 打印 "Hello, universe"
triggerRef(shallow)

customRef()

• customRef 是一个高阶函数，它允许你创建一个自定义的 ref，以精细地控制 ref 的 get 和 set 行为。当你需要自定义响应式引用的行为时，customRef 是非常有用的。
• customRef 接收一个工厂函数作为参数，该工厂函数返回一个对象，该对象必须包含 get 和 set 方法。get 方法返回引用的值，而 set 方法接收新的值并更新引用。

import {
    customRef, ref } from 'vue';  
  
function customRefWithValidation(value, validator) {
     
  // 使用内置的 ref 创建一个响应式引用  
  const innerRef = ref(value);  
  
  // 返回一个自定义的 ref 对象  
  return customRef((track, trigger) => {
     
    // get 方法：返回内部 ref 的值  
    return {
     
      get() {
     
        track