Vue组合式API进阶:深入了解进阶API

目录

引言 

进阶API介绍

        1.shallowRef()

        2.triggerRef()

        3.customRef ()

        4.toRow()

引言 

       在Vue 3中，组合式API为开发者提供了更加灵活和直观的方式来组织和管理组件的逻辑。除了基础的ref和reactive之外，Vue还提供了许多高级API函数，帮助我们在更复杂的场景中处理响应式数据。本文将深入讲解shallowRef、triggerRef、customRef、toRaw这些进阶API函数。

进阶API介绍

        1.shallowRef()

   shallowRef 在 Vue 3 的组合式 API 中，允许你创建一个只对其 .value 属性进行浅响应式的引用。这意味着，当你修改 shallowRef 所引用的对象的内部属性时，Vue 的响应式系统不会触发更新。只有当你替换整个对象时，视图才会更新。

        这种特性在某些场景下非常有用，特别是当你处理大型对象或数组，并且你只想对整个对象的替换进行响应式追踪，而不是其内部属性的变化时。使用 shallowRef 可以避免不必要的性能开销，因为 Vue 不需要追踪对象内部属性的变化。

示例：

import { shallowRef } from 'vue';  
  
// 假设有一个复杂的对象，我们只关心它的替换，不关心内部属性的变化  
const complexObject = shallowRef({  
  property1: { nestedProperty: 'value' },  
  property2: ['item1', 'item2']  
});  
  
// 修改内部属性不会触发视图更新  
complexObject.value.property1.nestedProperty = 'new value';  
  
// 替换整个对象会触发视图更新  
complexObject.value = {  
  newProperty: 'newValue'  
};

        2.triggerRef()

  triggerRef 在 Vue 3 的组合式 API 中，主要用于手动触发对 shallowRef 或 ref 的依赖更新。在某些情况下，当你知道某个引用值已经发生了变化，但 Vue 的响应式系统尚未捕获到这种变化时，triggerRef 就派上了用场。

  shallowRef 创建一个只对其 .value 属性进行浅响应式的引用。这意味着，当修改 shallowRef 引用的对象的内部属性时，Vue 的响应式系统不会触发更新。而 triggerRef 允许你在这种情况下手动触发视图更新。

        举个例子，假设你有一个 shallowRef 引用的对象，你修改了该对象的某个属性，但由于是浅响应式，Vue 不会自动更新视图。此时，你可以调用 triggerRef 函数并传入你的 shallowRef 引用，以手动触发视图的更新。

示例：

import { shallowRef, triggerRef } from 'vue';  
  
const state = shallowRef({ count: 1 });  
  
function change() {  
  state.value.count = 23;  
  triggerRef(state); // 手动触发视图更新  
}

        3.customRef ()

   customRef 接收一个工厂函数作为参数，该函数有两个参数：track 和 trigger。track 用于追踪依赖项，而 trigger 则用于触发更新。工厂函数应该返回一个对象，该对象具有 get 和 set 方法，用于获取和设置 ref 的值。

   customRef 的应用场景广泛，其中一个常见的场景是实现防抖或节流功能。通过控制依赖项的收集和更新触发的时机，可以有效地防止因为频繁触发更新而导致的性能问题。

示例：

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

        该代码定义了一个名为useDebouncedRef的自定义Vue ref函数，它使用customRef来实现防抖（debounce）功能。防抖是一种优化手段，用于限制某个函数在短时间内被频繁调用。

        4.toRow()

   toRaw() 是 Vue 3 Composition API 中的一个方法，它用于获取响应式对象的原始对象。在 Vue 3 中，当你使用 reactive() 或 ref() 创建响应式对象或引用时，这些对象或引用会被 Vue 的响应式系统“包装”起来，以便能够追踪它们的变化并触发相应的更新。

        toRaw 的主要作用是将一个由 reactive 生成的响应式对象转化为普通对象。当你不希望某个响应式对象再被 Vue 的响应式系统追踪，或者你想要访问该对象的原始状态时，可以使用 toRaw。

示例：

import { reactive, toRaw } from 'vue';  
  
const state = reactive({  
  count: 0  
});  
  
const rawState = toRaw(state);  
  
console.log(rawState === state); // 输出 false，因为 rawState 是原始对象，而 state 是响应式对象  
console.log(rawState.count); // 输出 0，可以访问原始对象的属性

   toRaw() 和 toRef ()的主要区别在于它们处理响应式数据的方式和目的不同。toRaw 用于获取响应式对象的原始版本，以便进行不触发更新的操作；而 toRef 则用于将对象中的单个属性转化为响应式数据，以便单独处理该属性的变化。