您的位置:首页 > 科技 > 能源 > 【vueUse库Reactivity模块各函数简介及使用方法--中篇】

【vueUse库Reactivity模块各函数简介及使用方法--中篇】

2024/10/7 0:25:48 来源:https://blog.csdn.net/xiejunlan/article/details/140312638  浏览:    关键词:【vueUse库Reactivity模块各函数简介及使用方法--中篇】

vueUse库是一个专门为Vue打造的工具库,提供了丰富的功能,包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数,以下是这些函数的简介和使用方法:

vueUse库Sensors模块各函数简介及使用方法

  • vueUse
    • Reactivity
      • 函数
      • 1. reactiveComputed
      • 2. reactiveOmit
      • 构想中的 reactiveOmit 函数
      • 实现方式
      • 注意事项
      • 3.reactivePick
      • 构想中的 reactivePick 函数
      • 实现方式
      • 注意事项
      • 4.refAutoReset
      • 构想中的refAutoReset函数
      • 可能的功能实现
      • 注意事项
      • 5.refDebounced
      • refDebounced函数的作用
      • 使用方法
      • 6.refDefault
      • 构想中的refDefault函数
      • 可能的实现方式
      • 注意事项
      • 7.refThrottled
      • 构想中的refThrottled函数
      • 可能的实现方式
      • 总结

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)// 因此,最终我们推荐直接返回 computedRefreturn 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 = {

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com