vueUse
库是一个专门为Vue打造的工具库,提供了丰富的功能,包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数,以下是这些函数的简介和使用方法:
vueUse库Sensors模块各函数简介及使用方法
vueUse
Reactivity
函数
1. reactiveComputed
reactiveComputed简介及使用方法
在 vueUse
库的官方文档中,实际上并没有直接名为 reactiveComputed
的函数作为 Reactivity
模块的一部分。然而,我们可以根据 Vue 3 的响应式系统和组合式 API 的概念来构想一个类似功能的函数,该函数可能结合了 reactive
和计算属性的概念。
在 Vue 3 中,reactive
用于创建响应式对象,而计算属性通常是通过 computed
函数在组合式 API (setup
函数内) 中创建的。但是,computed
函数返回的是一个只读的响应式引用,它不会自动地包裹在 reactive
对象中。
不过,我们可以创建一个自定义的 reactiveComputed
函数,该函数接受一个函数作为参数(这个函数返回我们要跟踪的计算值),并返回一个包含该计算值的响应式对象。但请注意,这种做法并不是 Vue 官方推荐的,因为它可能引入额外的复杂性和潜在的响应性陷阱。
不过,为了教学目的,我们可以这样构想一个 reactiveComputed
函数:
import {
reactive, computed } from 'vue';
// 自定义的 reactiveComputed 函数
function reactiveComputed(getter) {
// 使用 computed 创建一个计算属性
const computedRef = computed(getter);
// 创建一个响应式对象来包裹这个计算属性
// 注意:这种做法通常不是必要的,因为 computedRef 本身已经是响应式的
// 但为了符合 reactiveComputed 的命名,我们这样做
const reactiveObject = reactive({
value: computedRef.value, // 这里有一个问题:它不会自动更新
});
// 注意:上面的代码有一个问题,因为 reactiveObject.value 只是一个快照,
// 它不会随着 computedRef 的变化而自动更新。
// 正确的做法可能是直接返回 computedRef,或者创建一个自定义的 getter/setter
// 更合理的实现可能是这样的:
// 直接返回 computedRef,或者封装成一个对象但提供一个方法来访问值
// 但为了演示,我们将使用一个不推荐的“hack”来模拟自动更新(不推荐这样做)
// 使用 Vue 3 的 watch 和 effect 来实现自动更新(仅作为示例,不推荐在生产环境中使用)
import {
watchEffect } from 'vue';
watchEffect(() => {
// 注意:这里有一个性能陷阱,因为它会在每次组件更新时都运行
// 更好的做法是直接使用 computedRef,而不是尝试将其封装在 reactive 对象中
reactiveObject.value = computedRef.value;
});
// 但请注意,上面的 watchEffect 示例并不是一个好的实践,因为它会导致无限循环
// (因为 reactiveObject.value 的更新可能会触发组件的重新渲染,进而再次触发 watchEffect)
// 因此,最终我们推荐直接返回 computedRef
return computedRef;
// 或者,如果你确实需要一个对象,可以这样做:
// return reactive({ computedValue: computedRef });
// 然后你可以通过 obj.computedValue 来访问计算值
}
// 但请记住,上面的 reactiveComputed 实现存在多个问题,并且不推荐使用
// 在实际开发中,你应该直接使用 Vue 提供的 computed 函数
// 正确的使用方式(不使用 reactiveComputed):
// const count = ref(0);
// const doubled = computed(() => count.value * 2);
// 然后你可以直接在模板或 JavaScript 中使用 doubled
然而,如上所述,上面的 reactiveComputed
实现存在多个问题,包括性能陷阱和潜在的无限循环。因此,在实际应用中,你应该直接使用 Vue 提供的 computed
函数来创建计算属性。
如果你的目标是创建一个包含多个计算属性的响应式对象,你可以这样做:
import {
reactive, computed } from 'vue';
const state = reactive({
count: 0,
});
const computedState = reactive({
doubled: computed(() => state.count * 2),
// 可以添加更多计算属性...
});
// 但请注意,computedState.doubled 仍然是一个只读的响应式引用
// 你不能直接修改 computedState.doubled.value(这会抛出错误)
// 但你可以通过修改 state.count 来触发 doubled 的重新计算
然而,上面的 computedState
实际上并不是必需的,因为你可以直接在模板或 setup
函数中通过 computed
函数来访问 doubled
。如果你确实需要将这些计算属性组织在一个对象中,那么上面的方法是一个可行的选择,但请确保你不会尝试直接修改计算属性的值。
2. reactiveOmit
reactiveOmit简介及使用方法
在 vueUse
库的官方文档中,并没有直接名为 reactiveOmit
的函数。vueUse
库主要提供了一系列基于 Vue 3 Composition API 的实用函数,用于增强 Vue 应用的开发体验。然而,reactiveOmit
这个名字听起来像是结合了 Vue 的响应式系统(reactive
)和某种“省略”或“排除”操作的功能。
尽管 vueUse
没有提供 reactiveOmit
,但我们可以根据 Vue 的响应式系统和 JavaScript 的对象操作能力来构想一个这样的函数,并介绍其可能的使用方法和实现方式。
构想中的 reactiveOmit 函数
reactiveOmit
函数可能接受两个参数:一个响应式对象和一个包含要省略的属性名的数组(或类似结构)。该函数将返回一个新的响应式对象,该对象包含了原始对象中的所有属性,除了那些被明确省略的属性。
实现方式
import {
reactive } from 'vue';
// 自定义的 reactiveOmit 函数
function reactiveOmit(obj, omitKeys) {
// 创建一个新的对象,用于存放除省略键之外的所有属性
const newObj = {
标签:reactiveComputed,computedRef,函数,reactiveOmit,vueUse,--,reactive,Reactivity,compu
From: https://blog.csdn.net/xiejunlan/article/details/140312638