【Vue3】vue3有哪些方法和工具可以将参数变为响应式或处理响应式数据

news/2024/11/28 4:20:24/

在 Vue 3 中,有多种方法和工具可以将参数变为响应式或处理响应式数据。

一、将参数变为响应式的方法

  1. reactive

    • 将一个普通对象转换为响应式对象。
    javascript">import { reactive } from 'vue';
    const state = reactive({ count: 0 });
    
  2. readonly

    • 创建一个只读的响应式对象。
    javascript">import { readonly } from 'vue';
    const state = readonly({ count: 0 });
    
  3. ref

    • 创建一个包含单个响应式值的对象。
    javascript">import { ref } from 'vue';
    const count = ref(0);
    
  4. shallowReactive

    • 创建一个浅层响应式对象,仅对对象的顶层属性进行响应式处理。
    javascript">import { shallowReactive } from 'vue';
    const state = shallowReactive({ count: 0 });
    
  5. shallowReadonly

    • 创建一个浅层只读的响应式对象,仅对对象的顶层属性进行只读处理。
    javascript">import { shallowReadonly } from 'vue';
    const state = shallowReadonly({ count: 0 });
    
  6. shallowRef

    • 创建一个浅层响应式引用,仅对引用的顶层属性进行响应式处理。
    javascript">import { shallowRef } from 'vue';
    const count = shallowRef(0);
    
  7. toReftoRefs

    • toRef:将对象的某个属性转换为一个响应式的 ref 对象。
    • toRefs:将对象的所有属性转换为响应式的 ref 对象。
    javascript">import { reactive, toRef, toRefs } from 'vue';
    const state = reactive({ count: 0 });
    const countRef = toRef(state, 'count');
    const stateRefs = toRefs(state);
    
  8. computed

    • 创建一个计算属性,它会根据其依赖项自动更新。
    javascript">import { reactive, computed } from 'vue';
    const state = reactive({ count: 0 });
    const doubleCount = computed(() => state.count * 2);
    
  9. watchwatchEffect

    • watch:监听响应式数据的变化,并在变化时执行回调函数。
    • watchEffect:立即执行传入的函数,并在其依赖的响应式数据变化时重新执行。
    javascript">import { reactive, watch, watchEffect } from 'vue';
    const state = reactive({ count: 0 });watch(() => state.count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);
    });watchEffect(() => {console.log(`count is now ${state.count}`);
    });
    
  10. customRef

    • 创建一个自定义的 ref,可以自定义其依赖跟踪和触发更新的方式。
    javascript">import { customRef } from 'vue';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);}};});
    }const debouncedRef = useDebouncedRef(0);
    
  11. markRaw

    • 将一个对象标记为不可响应的,这样 Vue 就不会将它转换为响应式对象。
    javascript">import { reactive, markRaw } from 'vue';
    const rawObject = markRaw({ foo: 'bar' });
    const state = reactive({ raw: rawObject });
    
  12. triggerRef

    • 手动触发由 ref 创建的响应式对象的更新。
    javascript">import { ref, triggerRef } from 'vue';
    const myRef = ref({ foo: 'bar' });// 更新 ref 的值
    myRef.value.foo = 'baz';// 手动触发更新
    triggerRef(myRef);
    

这些工具和方法提供了灵活多样的方式来管理和处理响应式数据,帮助开发者根据不同的需求实现响应式状态管理。

二、使用 toRef 和 toRefs 的场景

toReftoRefs 在某些特定情况下仍然有其独特的用途和优势。让我解释一下为什么以及何时使用 toReftoRefs

使用 toReftoRefs 的场景

  1. 解构对象时保持响应式
    当你需要解构一个响应式对象时,直接解构会丢失响应性。toRefs 可以帮助你在解构时保持响应性。

    javascript">import { reactive, toRefs } from 'vue';const state = reactive({ count: 0, name: 'Vue' });// 直接解构会丢失响应性
    // const { count, name } = state;// 使用 toRefs 保持响应性
    const { count, name } = toRefs(state);
    
  2. 单独引用对象属性
    如果你需要单独引用对象的某个属性并传递给其他组件或函数,可以使用 toRef

    javascript">import { reactive, toRef } from 'vue';const state = reactive({ count: 0 });// 使用 toRef 创建单独的响应式引用
    const countRef = toRef(state, 'count');// 现在 countRef 是一个 ref,可以单独传递
    

示例解释

javascript">import { reactive, toRef, toRefs } from 'vue';const state = reactive({ count: 0 });// 使用 toRef 将 state 对象的 count 属性转换为一个 ref
const countRef = toRef(state, 'count');// 使用 toRefs 将 state 对象的所有属性转换为 refs
const stateRefs = toRefs(state);

在这个示例中:

  • state 是一个响应式对象,它的所有属性都是响应式的。
  • toRef(state, 'count')state 对象的 count 属性转换为一个 ref,这样你可以单独使用 countRef,并且它仍然是响应式的。
  • toRefs(state)state 对象的所有属性转换为 ref,这样你可以解构 stateRefs,并且每个属性仍然是响应式的。

http://www.ppmy.cn/news/1550526.html

相关文章

Spring Cloud服务拆分和使用RestTemplate远程调用

任何分布式架构都离不开服务的拆分,微服务也是一样。 2.1.服务拆分原则 这里我总结了微服务拆分时的几个原则: 单一职责原则:每个微服务应负责单一的业务功能,避免服务过于复杂或承担过多职责。这有助于降低服务间的耦合度&…

Nvidia 推出最新 AI 音频模型,可制作前所未有的声音

英伟达新发布的“Fugatto”模型能够通过创新的合成方法和推理技术,生成各种从未存在过的声音,包括混合音乐、语音和其他声音。虽然模型尚未公开测试,但其展示了许多独特的音频效果,展示了其潜力。 数据决定成败 在一篇解释性研究…

小程序-基于java+SpringBoot+Vue的网上花店微信小程序设计与实现

项目运行 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

LangChain——HTML文本分割 多种文本分割

Text Splitters 文本分割器 加载文档后,您通常会想要对其进行转换以更好地适合您的应用程序。最简单的例子是,您可能希望将长文档分割成更小的块,以适合模型的上下文窗口。 LangChain 有许多内置的文档转换器,可以轻松地拆分、组…

Java、Android引用类型

Java/Android中有四种引用类型,分别是: Strong reference - 强引用 Soft Reference - 软引用 Weak Reference - 弱引用 Phantom Reference - 虚引用 不同的引用类型有着不同的特性,同时也对应着不同的使用场景。 Strong reference - 强引用…

Windows 系统上构建 Linux 应用

Red Hat 和 Microsoft 共同宣布,Red Hat Enterprise Linux(RHEL)即将成为微软 Windows Subsystem for Linux(WSL)的官方 Linux 发行版。 在 Windows 系统上构建 Linux 应用,然后在 RHEL 环境中部署的开发人…

【大数据学习 | Spark-Core】RDD的五大特性(包含宽窄依赖)

分析一下rdd的特性和执行流程 A list of partitions 存在一系列的分区列表A function for computing each split 每个rdd上面都存在compute方法进行计算A list of dependencies on other RDDs 每个rdd上面都存在一系列的依赖关系Optionally, a Partitioner for key-value RDDs…

深度学习实验十二 卷积神经网络(3)——基于残差网络实现手写体数字识别实验

目录 一、模型构建 1.1残差单元 1.2 残差网络的整体结构 二、统计模型的参数量和计算量 三、数据预处理 四、没有残差连接的ResNet18 五、带残差连接的ResNet18 附:完整的可运行代码 实验大体步骤: 先前说明: 上次LeNet实验用到的那…