目录
引言
进阶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 timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, 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
则用于将对象中的单个属性转化为响应式数据,以便单独处理该属性的变化。