vue3基础ref,reactive,toRef ,toRefs 使用和理解

在这里插入图片描述

文章目录

    • 一. `ref`
      • 基本用法
      • 在模板中使用
      • `ref` 与 `reactive` 的区别
      • 使用场景
    • 二. `reactive`
      • 基本用法
      • 在模板中使用
      • `reactive` 与 `ref` 的区别
      • 使用场景
      • 性能优化
    • 三. `toRef`
      • 基本用法
      • 示例
      • 在组件中的应用
      • 主要用途
      • 对比 `ref` 和 `toRef`
    • 四. `toRefs`
      • 基本用法
      • 示例
      • 在组件中的应用
      • 主要用途
      • 对比 `ref` 和 `toRefs`
    • 总结


在 Vue 3 中,refreactivetoReftoRefs 是用于响应式数据管理的重要工具。理解它们的使用方式和区别对于有效地利用 Vue 3 的响应式系统至关重要。以下是对这些工具的详细解释和示例。

一. ref

ref 是 Vue 3 中用于创建响应式数据的一种方法。它主要用于处理基本数据类型(如字符串、数字、布尔值)以及简单的对象和数组。ref 允许你将一个普通的值变成响应式的,这样当这个值改变时,所有依赖于它的组件或计算属性也会自动更新。

基本用法

  1. 创建响应式引用

    import { ref } from 'vue';const count = ref(0); // 创建一个初始值为0的响应式引用
    
  2. 访问和修改值

    count.value++; // 修改值
    console.log(count.value); // 访问值
    

    注意:ref 创建的响应式数据需要使用 .value 属性来访问和修改。

在模板中使用

在 Vue 组件的模板中,ref 对象可以直接使用,而不需要 .value

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return { count, increment };}
};
</script>

refreactive 的区别

  • ref:适合用于基本数据类型(如字符串、数字、布尔值)。对于更复杂的数据结构,ref 也可以用于包装对象或数组,但在使用时需要通过 .value 访问内部数据。
  • reactive:用于创建一个响应式对象或数组,其中对象的每个属性都变成响应式的。reactive 更适合用于复杂的数据结构。

使用场景

  1. 简单的状态管理

    import { ref } from 'vue';const isLoggedIn = ref(false);
    const username = ref('');
    
  2. 计算属性

    import { ref, computed } from 'vue';const firstName = ref('John');
    const lastName = ref('Doe');const fullName = computed(() => `${firstName.value} ${lastName.value}`);
    
  3. 响应式的 DOM 操作

    import { ref } from 'vue';const isVisible = ref(true);
    

    在模板中:

    <template><div v-if="isVisible">Hello, World!</div>
    </template>
    

二. reactive

reactive 是 Vue 3 中用于创建响应式对象的一个核心 API。与 ref 主要处理基本数据类型不同,reactive 主要用于将复杂的对象(如对象和数组)转换为响应式对象,从而使得对象内部的所有属性都具有响应性。这意味着,当对象的属性发生变化时,所有依赖于这些属性的组件或计算属性也会自动更新。

基本用法

  1. 创建响应式对象

    import { reactive } from 'vue';const state = reactive({count: 0,name: 'John',items: ['apple', 'banana']
    });
    
  2. 访问和修改属性

    state.count++; // 修改 count 属性
    state.name = 'Doe'; // 修改 name 属性
    state.items.push('orange'); // 修改 items 数组
    

    直接访问和修改 reactive 对象的属性时,无需使用 .value。属性会自动响应。

在模板中使用

在 Vue 组件的模板中,reactive 对象的属性可以直接使用:

<template><div><p>Count: {{ state.count }}</p><p>Name: {{ state.name }}</p><ul><li v-for="item in state.items" :key="item">{{ item }}</li></ul><button @click="increment">Increment</button><button @click="addItem">Add Item</button></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const state = reactive({count: 0,name: 'John',items: ['apple', 'banana']});const increment = () => {state.count++;};const addItem = () => {state.items.push('orange');};return { state, increment, addItem };}
};
</script>

reactiveref 的区别

  • reactive:用于创建响应式对象或数组,使对象的所有属性都变成响应式。适合用于管理复杂的数据结构和多个相关的状态。
  • ref:用于创建响应式的单一值或基本数据类型。适合用于简单的数据,如数字、字符串或布尔值。ref 也可以包装对象或数组,但在访问时需要通过 .value

使用场景

  1. 复杂的状态管理

    import { reactive } from 'vue';const state = reactive({user: {name: 'John',age: 30},todos: [{ text: 'Buy groceries', done: false },{ text: 'Clean the house', done: true }]
    });// 修改嵌套对象的属性
    state.user.name = 'Doe';
    state.todos[0].done = true;
    
  2. 动态数组操作

    import { reactive } from 'vue';const state = reactive({items: ['apple', 'banana']
    });// 添加和删除数组元素
    state.items.push('orange');
    state.items.splice(1, 1); // 删除索引为1的元素
    
  3. 嵌套对象的响应式

    import { reactive } from 'vue';const state = reactive({user: {profile: {name: 'John',age: 30},settings: {theme: 'light'}}
    });// 修改嵌套属性
    state.user.profile.name = 'Doe';
    state.user.settings.theme = 'dark';
    

性能优化

  • 避免深层嵌套reactive 对象的嵌套层级过深可能会影响性能。在处理非常复杂的嵌套结构时,考虑将状态拆分成多个较浅的对象。
  • 只创建必要的响应式数据:将数据分为响应式和非响应式部分,避免将所有数据都转化为响应式,特别是当某些数据不会发生变化时。

三. toRef

toRef 是 Vue 3 中的一个实用工具函数,用于将普通对象的属性转换为响应式引用(ref)。这对于将嵌套对象或组件的响应式状态转换为单一的 ref 对象特别有用。

基本用法

toRef 将一个对象的特定属性转换为一个 ref 对象。ref 对象是 Vue 中用于创建响应式基本数据类型或对象的工具,它的 .value 属性持有实际的值,并且可以在模板中直接访问。

示例

假设你有一个响应式对象,你想将其中的某个属性单独提取为 ref,可以使用 toRef

import { reactive, toRef } from 'vue';// 创建一个响应式对象
const state = reactive({count: 0,name: 'John'
});// 将 state 对象中的 count 属性转换为 ref
const countRef = toRef(state, 'count');// 使用 countRef
console.log(countRef.value); // 输出: 0
countRef.value++; // 修改 count 的值// 更新后的值
console.log(state.count); // 输出: 1

在组件中的应用

toRef 在 Vue 组件中非常有用,尤其是在 setup 函数中。它允许你将响应式对象的属性以 ref 的形式暴露给模板或其他函数。

<template><div><p>Count: {{ countRef }}</p><button @click="increment">Increment</button></div>
</template><script>
import { reactive, toRef } from 'vue';export default {setup() {const state = reactive({count: 0});// 将 count 属性转换为 refconst countRef = toRef(state, 'count');const increment = () => {countRef.value++;};return { countRef, increment };}
};
</script>

主要用途

  1. 解耦和重用

    • toRef 可以将响应式对象的单个属性转换为 ref,使得这些属性能够在组件中独立使用。这对于需要将某些属性传递给子组件或者进行解耦操作时特别有用。
  2. 简化组合式 API 的使用

    • 当使用组合式 API (setup 函数) 时,可能会需要将复杂的响应式对象中的某些属性单独处理。toRef 使得这个过程更加简洁明了。
  3. ref 配合使用

    • 将对象属性转化为 ref 可以在模板中直接使用,避免了使用 .value 的繁琐操作。

对比 reftoRef

  • ref:用于创建一个新的响应式引用,无论是基本数据类型还是对象。当用于对象时,ref 会创建一个新的响应式引用对象,该对象的 .value 属性持有实际值。

  • toRef:用于将现有响应式对象的单个属性转换为 ref。这不会创建新的对象,而是直接转换现有对象的属性为 ref,从而简化属性的管理和访问。

注意toRef 可以使你将 reactive 对象的属性提取为 ref,这样可以单独处理这个属性,并保持其响应性。

四. toRefs

toRefs 是 Vue 3 中的一个实用工具函数,用于将一个响应式对象的所有属性转换为 ref。这对于将一个响应式对象中的属性逐一转换为独立的 ref 对象,方便在组件的 setup 函数中使用非常有用。

基本用法

toRefs 函数接收一个响应式对象作为参数,并返回一个新的对象,其中的每个属性都是 ref 对象。这个新对象的属性保持了原有对象的属性名称,并且每个属性的值是对应的 ref 对象。

示例

假设你有一个响应式对象,并希望将它的属性逐一转换为 ref,可以使用 toRefs

import { reactive, toRefs } from 'vue';// 创建一个响应式对象
const state = reactive({count: 0,name: 'John'
});// 将响应式对象的属性转换为 ref
const { count, name } = toRefs(state);// 使用转换后的 refs
console.log(count.value); // 输出: 0
console.log(name.value);  // 输出: 'John'
count.value++;            // 修改 count 的值// 更新后的值
console.log(state.count); // 输出: 1

在组件中的应用

在 Vue 组件的 setup 函数中,toRefs 可以帮助将响应式对象的属性方便地暴露给模板:

<template><div><p>Count: {{ count }}</p><p>Name: {{ name }}</p><button @click="increment">Increment</button></div>
</template><script>
import { reactive, toRefs } from 'vue';export default {setup() {const state = reactive({count: 0,name: 'John'});// 将响应式对象的属性转换为 refconst refs = toRefs(state);const increment = () => {refs.count.value++;};return { ...refs, increment };}
};
</script>

主要用途

  1. 解耦和重用

    • toRefs 可以将整个响应式对象的属性转换为 ref,使得这些属性可以独立使用。这对于需要将响应式对象的所有属性解耦并传递到模板中特别有用。
  2. 简化代码

    • 当你有一个响应式对象,使用 toRefs 可以避免手动将每个属性转换为 ref。这使得代码更加简洁和易读。
  3. 与模板配合

    • 在模板中使用 toRefs 转换后的属性时,可以直接访问这些属性,而无需再通过 .value 访问。这有助于保持模板的清晰性和简洁性。

对比 reftoRefs

  • ref:用于创建单个响应式引用,可以用于基本数据类型或对象。对于对象类型,ref 会创建一个新的响应式引用对象,该对象的 .value 属性持有实际值。

  • toRefs:用于将整个响应式对象的属性逐一转换为 ref。它返回一个新对象,其中的每个属性都是 ref 对象。这不会创建新的响应式对象,而是保持原有对象的结构,并将其属性转换为 ref

注意toRefsreactive 对象的每个属性转换为独立的 ref,这样每个属性都可以单独处理,并且保持响应性。

总结

  • ref:用于基本数据类型的响应式引用,访问和修改需要使用 .value
  • reactive:用于创建响应式对象或数组,直接访问和修改其属性。
  • toRef:将 reactive 对象的某个属性转换为 ref,适用于单个属性。
  • toRefs:将整个 reactive 对象的属性转换为 ref 对象,适用于需要解构响应式对象的场景。

这些工具在 Vue 3 的响应式系统中互相配合使用,可以帮助你更灵活地管理和使用响应式数据。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/404751.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Arch的轻量级发行版Archcraft结合内网穿透实现远程SSH连接

文章目录 前言1. 本地SSH连接测试2. Archcraft安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定SSH公网地址6. SSH固定地址连接 前言 本文主要介绍如何在Archcraft系统中安装Cpolar内网穿透工具,并以实现Windows环境ssh远程连接本地局域网Archcraft系统来说明使用内网…

高性能web服务器详解

一、Web服务的基础介绍 正常情况下单次web服务访问的流程简图&#xff1a; 1.1 Web服务介绍 这里介绍的是 Apache 和 NGINX 1.1.1 Apache 经典的Web服务端 Apache 起初由美国的伊利诺伊大学香槟分校的国家超级计算机应用中心开发 目前经历了两大版本分别是 1.X 和 2.X…

笔试练习day5

目录 游游的you题目解析解法方法一贪心方法二 腐烂的苹果题目解析例子1例子2解法多源BFS最短路径代码代码解析 JZ62 孩子们的游戏(圆圈中最后剩下的数)题目解析解法方法一模拟环形链表模拟数组模拟 方法二递推/递归/动态规划状态表示状态转移方程代码 感谢各位大佬对我的支持,如…

Mysql原理与调优-Mysql的内存结构

1.绪论 前面说过InnoDB每次查询数据或者更新数据&#xff0c;都是先以16kb的大小将数据读取到内存中&#xff0c;然后对内存中的数据页进行操作。为了减少磁盘IO&#xff0c;Innodb的会先单独的申请一块连续的空间&#xff0c;将从磁盘中的数据页缓存到这片内存中。这片内存就…

2D Inpainting 与NeRF 3D重建的多视角一致性问题

一 问题&#xff1a; NeRF依赖于输入图像的一致性。NeRF&#xff08;Neural Radiance Fields&#xff09;在生成三维场景时&#xff0c;依赖于从多个视角拍摄的输入图像之间的一致性来准确地推断场景的三维结构和颜色信息。 具体来说&#xff1a; 多视角一致性&#xff1a; Ne…

Hive3:三种常用的复杂数据类型

一、Array类型 1、数据示例 2、实操 元数据 zhangsan beijing,shanghai,tianjin,hangzhou wangwu changchun,chengdu,wuhan,beijin创建表 CREATE TABLE myhive.test_array(name string, work_locations array<string>) ROW FORMAT DELIMITED FIELDS TERMINATED BY \t…

LVM 使用以及配置

逻辑卷管理 (LVM) 是一种用于 Linux 系统的存储管理工具&#xff0c;比传统的磁盘分区方法更灵活。LVM 通过将物理存储设备组合成逻辑卷&#xff0c;使得磁盘空间的管理更加动态和便捷。它提供了物理层的抽象&#xff0c;让用户可以创建跨越多个物理磁盘或分区的逻辑卷。 LVM …

2024年软件测试经典面试题(全三篇)【包含答案】做完面试进入大厂不是梦

前言 迎来的便是金九银十&#xff0c;一直想着说分享一些软件测试的面试题&#xff0c;这段时间做了一些收集和整理&#xff0c;下面共有三篇经典面试题&#xff0c;大家可以试着做一下&#xff0c;答案附在后面&#xff0c;希望能帮助到大家。 软件测试经典面试题&#xff0…

【vue讲解:es6导入导出语法、 vue-router简单使用、登录跳转案例、scoped的使用、elementui使用】

1 es6导入导出语法 # 做项目&#xff1a;肯定要写模块--》导入使用# 默认导出和导入 在某个js中 # 命名导出和导入1.1 默认导出和导入 // #########导出语法########### // export default name // 只导出变量 // export default add // 只导出函数// export default {nam…

android13顶部状态栏里面调节背光 背景闪烁问题

总纲 android13 rom 开发总纲说明 目录 1.前言 2.问题分析 3.代码分析 4.代码修改 5.彩蛋 1.前言 android13顶部状态栏里面调节背光, 背景闪烁问题,会出现画面不全问题,如下图 2.问题分析 这里看起来是由于隐藏的时候,界面显示是一个渐变的隐藏,但是后面的背景又是…

Vue3列表(List)

效果如下图&#xff1a;在线预览 APIs List 参数说明类型默认值bordered是否展示边框booleanfalsevertical是否使用竖直样式booleanfalsesplit是否展示分割线booleantruesize列表尺寸‘small’ | ‘middle’ | ‘large’‘middle’loading是否加载中booleanfalsehoverable是否…

stripe Element 如何使用

这里要准备好几个东西&#xff1a; 一个支付成功过后的回调 还有一个下单的接口 一旦进入这个下单界面&#xff0c;就要去调下单的接口的&#xff0c;用 post, 这个 接口你自己写&#xff0c;可以写在后端中&#xff0c;也可以放到 nextjs 的 api 中。 首先说的是这个下单…

Linux ubuntu 24.04 运行《文明5》游戏,解决游戏中文设置的问题!

Linux ubuntu 24.04 运行《文明5》游戏&#xff0c;解决游戏中文设置的问题&#xff01; 《文明5》是一款回合制经营策略游戏&#xff0c;拼的就是科技发展速度&#xff0c;点的是科技树&#xff0c;抢的就是科技制高点&#xff0c;但是真的是时间漫长&#xff0c;可能需要好几…

会“坐”电梯,能避障碍,AGV无人搬运车进入各行各业

AGV 近年来&#xff0c;自动导引车&#xff08;Automated Guided Vehicle&#xff0c;简称AGV&#xff09;作为一种先进的物流设备&#xff0c;在制造业中广泛应用。AGV是一种能够自主行驶的无人驾驶车辆&#xff0c;通过内置的导航系统和传感器&#xff0c;实现对环境的感知与…

keepalived总结

一、概述 定义&#xff1a;Keepalived是一个用于实现服务器高可用性和负载均衡的软件&#xff0c;通过VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由器冗余协议&#xff09;实现故障转移。主要功能&#xff1a; 高可用系统网络服务&#xff1a;能够…

leetcode:1512. 好数对的数目(python3解法)

难度&#xff1a;简单 给你一个整数数组 nums 。 如果一组数字 (i,j) 满足 nums[i] nums[j] 且 i < j &#xff0c;就可以认为这是一组 好数对 。 返回好数对的数目。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1,1,3] 输出&#xff1a;4 解释&#xff1a;有 4 组好…

easyexcel--导入导出实现自定义格式转换

自定义格式 我们在数据库设计的时候经常会有枚举类型&#xff0c;如0表示普通用户&#xff0c;1表示VIP用户等&#xff0c;这在excel导入的时候&#xff0c;我们会填普通用户而不是0&#xff0c;这样就需要用到自定义格式把普通用户转换成0&#xff0c;我写了一个通用的抽象类…

【机器学习】探索机器学习在旅游业的革新之旅

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f50d;1. 引言&#x1f4d2;2. 机器学习在旅游需求分析中的应用&#x1f31e;用户行为数据分析&#x1f319;旅客偏好预测模型⭐…

垂直行业数字化表现抢眼 亚信科技全年利润展望乐观

大数据产业创新服务媒体 ——聚焦数据 改变商业 2024年8月14日&#xff0c;亚信科技控股有限公司&#xff08;股票代码&#xff1a;01675.HK&#xff09;公布了公司截至2024年6月30日的中期业绩。 财报数据显示&#xff0c;2024年上半年&#xff0c;亚信科技的营业收入为人民币…

传输大咖30|动漫游戏行业都在用的企业大文件传输系统

随着动漫游戏对画质的要求越来越高&#xff0c;动画、游戏数据越来越复杂&#xff0c;企业需要传输的文件也越来越庞大&#xff0c;这给动漫游戏行业的大文件传输带来了许多挑战。例如&#xff0c;文件的大小限制、传输速度、文件传输的安全性和稳定性、平台的兼容性等因素将直…