Vue3:响应式数据的基本使用(ref、reactive)

一、前言

  • 在Vue3中,如果数据不是响应式数据,当数据的值发生改变时,页面上的数据是不会发生改变的。
  • 因此本文主要介绍Vue3中响应式数据的使用,包括ref和reactive的基本使用。

二、ref

1、ref —— 创建基本类型的响应式数据
  • ref 可以定义基本类型的响应式变量
  • 语法 :
let xxx=ref(初始值)
  • 返回值:
    是一个RefImpl的实例对象,简称ref对象或ref,ref对象中的value属性是响应式的。
  • 其他:
    在JS中操作数据需要使用 "xxx.value"的形式,但在模板中不需要用. value,直接使用即可。
(1)引入ref
import {ref} from ' vue '
(2)代码
  • 代码解析

在这里插入图片描述

  • 完整代码
<template><p>个人信息:</p><p>性别:{{ gender }}</p><p>年龄:{{ age }}</p><button @click="ageChange">点击年龄加1</button>
</template><script setup>
import { ref } from "vue";// 数据
let gender = ref("女");
let age = ref(25);// 方法
function ageChange() {age.value += 1;
}
</script>
  • 结果:
    在这里插入图片描述

  • 点击按钮,响应式数据会在页面上发生变化:

在这里插入图片描述

2、ref —— 创建对象类型的响应式数据

ref也可以创建对象类型的响应式数据。

(1)代码解析
  • ref可以定义以下类型的数据:

在这里插入图片描述

  • 修改ref的数据时记得.value的使用以及使用顺序:
    在这里插入图片描述

  • 在模板中,不需要使用.value

在这里插入图片描述

(2)完整代码
<template><p>小明的年龄是:{{ info.age }}</p><p>小明的身高是:{{ info.height }} cm</p><button @click="ageChange">点击年龄加1</button><button @click="heightChange">点击身高加1</button><br /><h2>星座列表:</h2><ul><li v-for="item in Constellation" :key="item.id">{{ item.star }}</li></ul><button @click="ConstellationChange">点击修改第二个星座名称</button>
</template><script setup>
import { ref } from "vue";// 数据
let info = ref({age: 20,height: 165,
});
let Constellation = ref([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);// 方法
function ageChange() {info.value.age += 1;
}
function heightChange() {info.value.height += 1;
}
function ConstellationChange() {Constellation.value[1].star = "处女座";
}
</script>  

三、reactive

1、概念

reactive只能定义对象类型的响应式数据,例如:

  • 数据1:
let info = reactive({age: 20,height: 165,
});
  • 数据2:
let Constellation = reactive([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);
  • 而以下代码是错误的(reactive不能定义基本类型的数据):
let name=reactive("张三")
2、代码
<template><p>小明的年龄是:{{ info.age }}</p><p>小明的身高是:{{ info.height }} cm</p><button @click="ageChange">点击年龄加1</button><button @click="heightChange">点击身高加1</button><br /><h2>星座列表:</h2><ul><li v-for="item in Constellation" :key="item.id">{{ item.star }}</li></ul>
</template><script setup>
import { reactive } from "vue";// 数据
let info = reactive({age: 20,height: 165,
});
let Constellation = reactive([{ id: 1, star: "双子座" },{ id: 2, star: "狮子座" },{ id: 3, star: "巨蟹座" },
]);// 方法
function ageChange() {info.age += 1;
}
function heightChange() {info.height += 1;
}
</script>
  • 结果:
    在这里插入图片描述

  • 点击按钮,响应式数据会在页面上发生变化:

在这里插入图片描述

3、注意事项
  • reactive重新分配一个新对象, 会失去响应式;可以使用object . assign去整体替换,举例:

原本有数据如下:

// 数据
let info = reactive({age: 20,height: 165,
});

点击按钮对整体数据进行修改:

function infoChange() {info={age: 30,height: 185,
}
}

但是这样修改数据之后,点击按钮数据并不会修改:
在这里插入图片描述

而使用object . assign可以让页面的数据进行更新:

function infoChange() {Object.assign(info, {age: 30,height: 185,});
}

在这里插入图片描述
结果如下:
在这里插入图片描述

四、总结

  • ref可以定义基本类型数据、对象类型数据;reactive只能定义对象类型数据
  • 若需要一个响应式对象,层级不深,ref 、reactive 都可以
  • 若需要一个响应式对象,且层级较深,推荐使用reactive

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

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

相关文章

第100+6步 ChatGPT文献复现:ARIMAX预测新冠

基于WIN10的64位系统演示 一、写在前面 我们继续来解读ARIMAX模型文章&#xff0c;这一轮带来的是&#xff1a; 《PLoS One》杂志的2022年一篇题目为《A data-driven eXtreme gradient boosting machine learning model to predict COVID-19 transmission with meteorologic…

【Java】HOT100 回溯

目录 理论基础 一、组合问题 LeetCode77&#xff1a;组合 LeetCode17&#xff1a;电话号码的字母组合 LeetCode39&#xff1a;组合总和 LeetCode216&#xff1a;组合总和ii LeetCode216&#xff1a;组合总和iii 二、分割问题 LeetCode131&#xff1a;分割回文串 Leet…

【Linux开发 第十三篇】shell编程

shell编程 shell编程shell脚本函数 数据库备份 shell编程 对于后端开发&#xff0c;掌握shell编程是非常有必要的&#xff0c;可以对服务器进行维护&#xff0c;同时也可以对数据库进行操作 shell是一个命令解释器&#xff0c;它为用户提供了一个向Linux内核发送请求来运行的界…

NCF29A1 高端阻抗匹配

一、前言 Class E 高端 L-Front 匹配集成了额外的滤波器&#xff0c;提供了足够的谐波衰减&#xff0c;使 NCF29A1 与天线在比基频更高的频率下具有相当大的增益。向 PA 提供的阻抗和输出电容与表 1 ZPAOUT 所示相同。 二、原理图 图 1 高端 L-Front 匹配原理图 1&#xff…

lementui el-menu侧边栏占满高度且不超出视口

做了几次老是忘记&#xff0c;这次整理好逻辑做个笔记方便重复利用&#xff1b; 问题&#xff1a;elementui的侧边栏是占不满高度的&#xff1b;但是使用100vh又会超出视口高度不美观&#xff1b; 解决办法&#xff1a; 1.获取到侧边栏底部到视口顶部的距离 2.获取到视口的高…

vue实现水平排列且水平居中

样式实现 .body{text-align: center; } .body_content{display: inline-block; } .body_content_cardList{display: flex;flex-wrap: wrap;text-align: center; }<div class"body"><div class"body_content"><div class"body_content…

过滤器Filter和拦截器Interceptor心得

上一篇文章讲了监听器Listener&#xff0c;下面我们来讲一下过滤器和拦截器。 一、过滤器Filter。 首先&#xff0c;servlet容器&#xff08;比如tomcat&#xff09;肯定的要有servlet才能发挥它的光彩。在上古jsp时代&#xff0c;我们会写各种servlet通过不同的请求来实现我…

日志框架整合SpringBoot保姆级教程+日志文件拆分(附源码)

介绍 日志概述 只要程序员投身在实际的学习和生产环境中&#xff0c;就会对日志的重要性有着充分的认知&#xff0c;尤其是对于 Web 以及更高级的应用。在很多情况下&#xff0c;日志可能是我们了解应用如何执行的唯一方式。 但是现实是很多程序员对于日志的记录的认知比较肤…

基于CAPL的S19文件解析

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…

计算IP地址总个数的方法及其应用

IP地址是计算机网络中用于唯一标识和定位设备的数字地址&#xff0c;是Internet Protocol&#xff08;IP&#xff09;的核心组成部分。计算IP地址的总个数是网络规划和管理中的重要任务之一&#xff0c;本文将介绍计算IP地址总个数的方法及其应用。 IP地址查询&#xff1a;IP数…

如何在PostgreSQL中创建一个新的数据库,并指定所有者?

文章目录 解决方案示例代码 PostgreSQL是一个强大的开源关系型数据库管理系统&#xff0c;它允许用户创建和管理多个数据库。在PostgreSQL中创建一个新的数据库并指定所有者是一个常见的操作。下面&#xff0c;我们将详细解释如何执行这一操作&#xff0c;并提供示例代码。 解…

e2e测试框架之Cypress

谈起web自动化测试&#xff0c;大家首先想到的是Selenium&#xff01;随着近几年前端技术的发展&#xff0c;出现了不少前端测试框架&#xff0c;这些测试框架大多并不依赖于Selenium&#xff0c;这一点跟后端测试框架有很大不同&#xff0c;如Robot Framework做Web自动化测试本…