Vue3之ref与reactive的基本使用

ref可以创建基本类型、对象类型的响应式数据
reactive只可以创建对象类型的响应式数据

接下来让我为大家介绍一下吧!

在Vue3中,我们想让数据变成响应式数据,我们需要借助到ref与reactive

先为大家介绍一下ref如何使用还有什么注意点
我们需要导入ref,利用对象结构的办法

<template><div>sum的值为:{{ sum }}</div><button @click="add">sum+1</button><div>姓名:{{ obj.name }}</div><button @click="changeName">修改姓名为李四</button>
</template><script setup lang="ts" name="Person">
import { ref } from 'vue';
// 我们需要用ref()的形式去定义需要响应式的数据
let sum = ref(1)
function add() {// 注意点,我们需要用到 sum.value才可以获取到值sum.value += 1
}
// 我们也可以用在对象上
const obj = ref({name: "张三"
})
function changeName() {// 对象我们需要使用到obj.value才可以修改数据obj.value.name = "李四"
}
</script>
<style scoped></style>

请添加图片描述

为大家介绍一下reactive的基本使用与注意事项吧!

<template><div>姓名:{{ obj.name }}</div><button @click="changeName">修改姓名为李四</button>
</template><script setup lang="ts" name="Person">
import { reactive } from 'vue';
// 我们也可以用在对象上
const obj = reactive({name: "张三"
})
// reactive就不像ref一样,不需要使用到.value
function changeName() {// 修改姓名 直接obj.name// obj.name = "李四"// 我们也可以使用到Object.assign 这是我们想把对象整体改掉时写的Object.assign(obj, { name: "李四" })
}
</script>
<style scoped></style>

请添加图片描述

使用规则:
若需要一个基本类型的响应式数据,必须用ref
若需要一个响应式对象,层级不深,ref、reactive 都可以
若需要一个响应式对象,且层级较深,推荐使用reactive

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)

案例&#xff1a; <view class"abc"><view class"abc-item" v-for"(item,index) in 8" :key"index">看我</view> </view> <style lang"less">.abc{height: 100px;display: flex;flex-wrap: …

Web基础②nginx搭建与配置

目录 一.Nginx概述 1.定义 2.Nginx模块作用 &#xff08;1&#xff09;main模块 &#xff08;2&#xff09;stream服务模块 &#xff08;3&#xff09;邮件服务模块 &#xff08;4&#xff09;第三方模块 &#xff08;5&#xff09;events模块 &#xff08;6&#xff…

Python 进阶语法:JSON

1 什么是 JSON&#xff1f; 1.1 JSON 的定义 JSON 是 JavaScript Object Notation 的简写&#xff0c;字面上的意思是 JavaScript 对象标记。本质上&#xff0c;JSON 是轻量级的文本数据交换格式。轻量级&#xff0c;是拿它与另一种数据交换格式XML进行比较&#xff0c;相当轻…

Sora--首个大型视频生成模型

Sora--首个大型视频生成模型 胡锡进于2024年2月20日认为&#xff1a;台当局怂了 新的改变世界模拟器视觉数据转换视频压缩时空补丁&#xff08;Spacetime Laten Patches&#xff09;视频生成扩展变压器算法和模型架构结语 胡锡进于2024年2月20日认为&#xff1a;台当局怂了 **T…

六大设计原则 (SOLID)

一、设计原则概述 古人云: 有道无术,术可求.有术无道,止于术. 而设计模式通常需要遵循一些设计原则,在设计原则的基础之上衍生出了各种各样的设计模式。设计原则是设计要求,设计模式是设计方案,使用设计模式的代码则是具体的实现。 设计模式中主要有六大设计原则,简称为SOL…

conda 进入虚拟环境命令报错

问题描述 conda-script.py: error: argument COMMAND: invalid choice: activate 解决方案&#xff1a; 在终端命令先执行 conda init&#xff0c;重置conda环境。然后退出终端&#xff0c;重新进入终端即可conda activate env了。

【web | CTF】反序列化打法

天命&#xff1a;因为是php的上古版本&#xff0c;所以本机无法复现&#xff0c;只能用归纳法解决&#xff0c;就是题海战术找相同点&#xff0c;fuzz来测试新的题目 题目一&#xff1a;绕过正则和绕过__wakeup函数&#xff0c;private属性 【web | CTF】攻防世界 Web_php_uns…

【云原生】持续集成持续部署

本文主要总结CI/CD的流程&#xff0c;不会详细介绍每个知识点。 啥是集成&#xff1f;啥是部署&#xff1f; 集成&#xff0c;就是把应用程序、相关环境、配置全局打包放在一个容器中的操作。部署就不解释了。 CI/CD 如果是自己手动部署的话&#xff0c;流程应该是这样的&am…

FPS游戏漫谈之PVE AI技能和Buff属性描述

在Unity引擎中开发FPS射击游戏的PVE部分时&#xff0c;怪物AI的技能和buff属性可以分为静态属性和动态属性。 静态属性 静态属性是指那些在游戏开始之前就已经定义好&#xff0c;并且在游戏过程中不会改变的属性。这些属性包括但不限于&#xff1a; 技能的基础伤害值 技能的冷…

Global Gamers Challenge | 与 Flutter 一起保护地球

作者 / Kelvin Boateng 我们知道 Flutter 开发者热爱挑战&#xff0c;因此我们很高兴地宣布&#xff0c;新一轮的 Flutter 挑战赛来了&#xff01; 挑战https://flutter.cn/events/puzzle-hack Global Gamers Challenge 是一项为期 8 周的比赛&#xff0c;参赛者需要设计、构建…

零到大师:嵌入式Linux学习书单分享

大家好&#xff0c;我是知微&#xff01; 上一篇推荐的书单嵌入式软件必读10本书_单片机篇&#xff0c;收到反响很好。再推荐一篇嵌入式Linux相关的书单。 《鸟哥的Linux私房菜》 鸟哥的Linux系列适合零基础小伙伴&#xff0c;从电脑基础到文件系统、shell脚本等等&#xff…

基于机器学习的青藏高原高寒沼泽湿地蒸散发插补研究_王秀英_2022

基于机器学习的青藏高原高寒沼泽湿地蒸散发插补研究_王秀英_2022 摘要关键词 1 材料和方法1.1 研究区概况与数据来源1.2 研究方法 2 结果和分析2.1 蒸散发通量观测数据缺省状况2.2 蒸散发与气象因子的相关性分析2.3 不同气象因子输入组合下各模型算法精度对比2.4 随机森林回归模…

Netty-核心组件

核心组件 1.Bootstrap和ServerBootstrap2.Future和ChannelFuture3.Channel4.Selector5.NioEventLoop6.NioEventLoopGroup7.ByteBuf8.ChannelHandler9.ChannelHandlerContext10.ChannelPipeline 1.Bootstrap和ServerBootstrap Bootstrap是Netty的启动程序&#xff0c;⼀个Netty…

Modern C++ std::variant的实现原理

前言 std::variant是C17标准库引入的一种类型&#xff0c;用于安全地存储和访问多种类型中的一种。它类似于C语言中的联合体&#xff08;union&#xff09;&#xff0c;但功能更为强大。与联合体相比&#xff0c;std::variant具有类型安全性&#xff0c;可以判断当前存储的实际…

SQL注入:堆叠注入-强网杯[随便注]

目录 什么是堆叠注入&#xff1f; 强网杯-随便注 rename && alter绕过 prepare绕过 Handle绕过 靶机&#xff1a;BUUCTF在线评测 什么是堆叠注入&#xff1f; 在一些场景中&#xff0c;应用程序支持一次执行多条SQL语句&#xff0c;我们称为堆叠查询&#xff0c;…

MyBatis-Plus:通用分页实体封装

分页查询实体&#xff1a;PageQuery package com.example.demo.demos.model.query;import com.baomidou.mybatisplus.core.metadata.OrderItem; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import lombok.Data; import org.springframework.util.St…

MYSQL数据库详解

一、数据库的基本概念 数据&#xff08;data&#xff09;&#xff1a;指对客观事物进行描述并可以鉴别的符号。这些符号是可识别的&#xff0c;抽象的。 比如数字、图片、音频等。 数据库管理系统&#xff08;DBMS&#xff09;&#xff1a;数据库极其管理它的软件组成。 数据库…

机器人内部传感器阅读笔记及心得-位置传感器-电位器式位置传感器

位置传感器 位置感觉是机器人最基本的感觉要求&#xff0c;可以通过多种传感器来实现。位置传感器包括位置和角度检测传感器。常用的机器人位置传感器有电位器式、光电式、电感式、电容式、霍尔元件式、磁栅式及机械式位置传感器等。机器人各关节和连杆的运动定位精度要求、重…

qt-OPENGL-星系仿真

qt-OPENGL-星系仿真 一、演示效果二、核心程序三、下载链接 一、演示效果 二、核心程序 #include "model.h"Model::Model(QOpenGLWidget *_glWidget) { glWidget _glWidget;glWidget->makeCurrent();initializeOpenGLFunctions(); }Model::~Model() {destroyV…

Dockerfile第十七章 : Dockerfile文件与指令说明

第十七章 : Dockerfile文件与指令说明 本章知识点: 本文介绍了Dockerfile的编写规则、基本结构、执行顺序以及常用指令的说明。Dockerfile的编写需要遵循一定的规则,包括使用指令、构建上下文和文件路径等。基本结构包括基础镜像信息、维护者信息、镜像操作指令和容器启动…