Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象

 Vue3.0组合式API系列文章:

《Vue3.0组合式API:setup()函数》

《Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象》

《Vue3.0组合式API:computed计算属性、watch监听器、watchEffect高级监听器》

《Vue3.0组合式API:使用defineProps()实现父组件向子组件传递数据》

《Vue3.0组合式API:使用defineEmits()实现子组件向父组件传递数据》

《Vue3.0组合式API:生命周期钩子函数》

《Vue3.0组合式API:依赖注入provide和inject实现跨层组件的通信》

《Vue3.0组合式API:使用ref获取DOM元素》

1、reactive() 方法

reactive() 方法用于将定义的 JavaScript 对象转换为响应式对象。

使用方法:

<script setup>
//第一步:导入函数
import { reactive } from 'vue';

//第二步:创建响应式对象
const data = reactive(对象类型的数据);
</script>

【实例】使用 reactive() 方法,创建一个响应式对象,并实现修改响应式对象的值。

<template>
    <fieldset>
        <legend>组件</legend>
        <p>用户名称:{{ userInfo.userName }}</p>
        <p>用户年龄:{{ userInfo.age }}</p>
        <p>博客信息:{{ userInfo.blogName }}</p>
        <p>博客地址:{{ userInfo.blogUrl }}</p>
        <button @click="updateAge">修改年龄</button>
    </fieldset>
</template>

<script setup>
//第一步:导入函数
import { reactive } from 'vue';

//第二步:创建响应式对象,参数为对象
const userInfo = reactive({
    userName: 'pan_junbiao的博客',
    age: 0,
    blogName: '您好,欢迎访问 pan_junbiao的博客',
    blogUrl: 'https://blog.csdn.net/pan_junbiao'
});

//修改年龄方法
function updateAge() {
    userInfo.age = 36;
}

</script>

执行结果:

2、ref() 方法

reactive() 方法可以为一个 JavaScript 对象创建响应式代理,如果需要对象某个基本数据类型(如:数字、字符串)的数据创建响应式代理对象,可以通过 ref() 方法实现。该方法接收一个原始值作为参数(也支持对象类型),返回一个响应式的对象,该对象只有一个 value 属性值指向内部值。

使用方法:

<script setup>
//第一步:导入函数
import { ref } from 'vue';

//第二步:创建响应式对象
const data = ref(基本数据类型 或 对象类型);
</script>

<template>
    <!-- 第三步:使用响应式对象 -->
    <p>{{ data }}</p>
</template>

【实例】使用 ref() 方法,创建一个响应式对象,并实现一个计数器功能。

<template>
    <fieldset>
        <legend>组件</legend>
        <!-- 第三步:使用响应式对象 -->
        <p>计数结果:{{ count }}</p>
        <button @click="counter">计数器</button>
    </fieldset>
</template>

<script setup>
//第一步:导入函数
import { ref } from 'vue';

//第二步:创建响应式对象
const count = ref(0);

// 增加计数的方法
function counter() {
    //注意:使用响应式对象的.value属性,获取内部值
    count.value++;
}
</script>

 执行结果:

说明:

如果将 ref() 方法创建的响应式代理对象作为属性返回,那么在模板中访问时不需要添加 .value 属性。

3、reactive 与 ref 的区别

reactive() 方法与 ref() 方法都可以用于创建响应式代理对象。但它们之间存在着以下几点区别:

  1. reactive() 方法的参数,必须是对象类型。
  2. ref() 方法参数可以是基本数据类型,也可以是对象类型。
  3. ref() 方法创建的响应式对象,必须通过 .value 属性访问。
  4. ref() 方法的内部实现依赖于 reactive() 方法。

在实际的项目开发中,推荐使用 ref() 方法,因为更加灵活。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

漏洞挖掘 | Selenium Grid 中的 SSRF

Selenium 网格框架上的基本服务器端请求伪造 最近&#xff0c;我正在阅读漏洞文章看到Peter Jaric写的一篇 Selenium Grid 文章&#xff1b;他解释了 Selenium Grid 框架上缺乏身份验证和安全措施强化的问题。 在网上进行了更多搜索&#xff0c;我发现 Selenium Grid 开箱即用…

音视频入门基础:FLV专题(3)——FLV header简介

一、引言 本文对FLV格式的FLV header进行简介&#xff0c;FLV文件的开头就是FLV header。 进行简介之前&#xff0c;请各位先从《音视频入门基础&#xff1a;FLV专题&#xff08;1&#xff09;——FLV官方文档下载》下载FLV的官方文档《video_file_format_spec_v10_1.pdf》和…

【第十二章:Sentosa_DSML社区版-机器学习之回归】

目录 12.1 线性回归 12.2 决策树回归 12.3 梯度提升决策树回归 12.4 保序回归 12.5 XGBoost回归 12.6 随机森林回归 12.7 广义线性回归 12.8 LightGBM回归 12.9 因子分解机回归 12.10 AdaBoost回归 12.11 KNN回归 12.12 高斯过程回归 12.13 多层感知机回归 【第十…

基于YOLOv8+LSTM的商超扶梯场景下行人安全行为姿态检测识别

基于YOLOv8LSTM的商超扶梯场景下行人安全行为姿态检测识别 手扶电梯 行为识别 可检测有人正常行走&#xff0c;有人 跌倒&#xff0c;有人逆行三种行为 跌倒检测 电梯跌倒 扶梯跌倒 人体行为检测 YOLOv8LSTM。 基于YOLOv8LSTM的商超扶梯场景下行人安全行为姿态检测识别&#xf…

小程序构建npm失败

小程序构建npm失败 项目工程结构说明解决方法引入依赖导致的其他问题 今天在初始化后的小程序中引入TDesign组件库&#xff0c;构建npm时报错。 项目工程结构说明 初始化后的项目中&#xff0c;包含miniprogram文件夹和一些项目配置文件&#xff0c;在project.config.json文件中…

最新简洁大方的自动发卡网站源码/鲸发卡v11.61系统源码/修复版

源码简介&#xff1a; 最新简洁大方的自动发卡网站源码&#xff0c;它就是鲸发卡v11.61系统源码&#xff0c;它是修复版。 说到鲸发卡系统&#xff0c;鲸发卡系统在发卡圈很多人都知道的&#xff0c;它是市面最好发卡系统之一&#xff0c;操作起来简单得很&#xff0c;界面也…

手机在网状态查询接口如何用PHP进行调用?

一、什么是手机在网状态查询接口&#xff1f; 手机在网状态查询接口&#xff0c;即输入手机号码查询手机号在网状态&#xff0c;返回有正常使用、停机、在网但不可用、不在网&#xff08;销号/未启用/异常&#xff09;、预销户等多种状态。 二、手机在网状态查询适用哪些场景…

无人机视角下的车辆数据集

车辆数据集 无人机视角下的车辆数据集。数据集为无人机俯拍的真实场景下的车辆机动车数据集。数据集已经标注好&#xff0c;yolo格式&#xff0c;txt标签。数据集已经划分好训练集&#xff08;20970张图片&#xff09;验证集&#xff08;5242张图片&#xff09;测试集&#xff…

Redis的主从模式、哨兵模式、集群模式

最近学习了一下这三种架构模式&#xff0c;这里记录一下&#xff0c;仅供参考 目录 一、主从架构 1、搭建方式 2、同步原理 3、优化策略&#xff1a; 4、总结&#xff1a; 二、哨兵架构 1、搭建哨兵集群 2、RedisTemplate如何使用哨兵模式 三、分片集群架构 1&#…

Python用TOPSIS熵权法重构粮食系统及期刊指标权重多属性决策MCDM研究|附数据代码...

原文链接&#xff1a;https://tecdat.cn/?p37724 在当今世界&#xff0c;粮食系统的稳定性至关重要。尽管现有的全球粮食系统在生产和分配方面表现出较高的效率&#xff0c;但仍存在大量人口遭受饥饿以及诸多粮食安全隐患。与此同时&#xff0c;在学术领域&#xff0c;准确评估…

Golang | Leetcode Golang题解之第430题扁平化多级双向链表

题目&#xff1a; 题解&#xff1a; func dfs(node *Node) (last *Node) {cur : nodefor cur ! nil {next : cur.Next// 如果有子节点&#xff0c;那么首先处理子节点if cur.Child ! nil {childLast : dfs(cur.Child)next cur.Next// 将 node 与 child 相连cur.Next cur.Chi…

汉王手写签批控件如何在谷歌、火狐、Edge等浏览器使用

背景 近日&#xff0c;有网友咨询汉王手写签批控件是否可以通过allWebPlugin中间件技术加载到谷歌、火狐、Edge等浏览器&#xff1f;为此&#xff0c;笔者详细了解了一下汉王手写签批控件&#xff0c;它是一个标准的ActiveX控件&#xff0c;曾经主要在IE浏览器使用&#xff0c;…

【计算机基础】用bat命令将Unity导出PC包转成单个exe可执行文件

Unity打包成exe可执行文件 上边连接是很久以前用过的方法&#xff0c;发现操作有些不一样了&#xff0c;并且如果按上述操作比较麻烦&#xff0c;所以写了个bat命令。 图1、导出的pc程序 如图1是导出的pc程序&#xff0c;点击exe文件可运行该程序。 添加pack_project.bat文件 …

大数据Flink(一百二十二):阿里云Flink MySQL连接器介绍

文章目录 阿里云Flink MySQL连接器介绍 一、特色功能 二、​​​​​​​语法结构 三、​​​​​​​​​​​​​​WITH参数 阿里云Flink MySQL连接器介绍 阿里云提供了MySQL连接器&#xff0c;其作为源表时&#xff0c;扮演的就是flink cdc的角色。 一、特色功能 MySQ…

操作系统 | 学习笔记 | | 王道 | 5.3 磁盘和固态硬盘

5.3 磁盘和固态硬盘 5.3.1 磁盘 磁盘结构 磁盘&#xff1a;磁盘的表面由一些磁性物质组成&#xff0c;可以用这些磁性物质来记录二进制数据 磁道&#xff1a;磁盘的盘面被划分成一个个磁道。这样的一个“圈”就是一个磁道 扇区&#xff1a;一个磁道又被划分成一个个扇区&am…

大数据毕业设计选题推荐-网络电视剧收视率分析系统-Hive-Hadoop-Spark

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、PHP、.NET、Node.js、GO、微信小程序、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇…

通信工程学习:什么是NFVO网络功能虚拟化编排器

NFVO&#xff1a;网络功能虚拟化编排器 NFVO&#xff08;Network Functions Virtualization Orchestrator&#xff09;&#xff0c;即网络功能虚拟化编排器&#xff0c;是网络功能虚拟化&#xff08;NFV&#xff09;架构中的核心组件之一。NFV是一种将传统电信网络中的网络节点…

从零开始学习Python

目录 从零开始学习Python 引言 环境搭建 安装Python解释器 选择IDE 基础语法 注释 变量和数据类型 变量命名规则 数据类型 运算符 算术运算符 比较运算符 逻辑运算符 输入和输出 控制流 条件语句 循环语句 for循环 while循环 循环控制语句 函数和模块 定…

黑马智数Day3

渲染基础Table列表 封装接口&#xff1a; export function getCardListAPI(params) {return request({url: /parking/card/list,params}) } 具体实现&#xff1a; import { getCardListAPI } from /apis/cardexport default {data() {return {// 请求参数params: {page: 1,pa…

乌克兰因安全风险首次禁用Telegram

据BleepingComputer消息&#xff0c;乌克兰国家网络安全协调中心 &#xff08;NCCC&#xff09; 以国家安全为由&#xff0c;已下令限制在政府机构、军事单位和关键基础设施内使用 Telegram 消息应用程序。 这一消息通过NCCC的官方 Facebook 账号对外发布&#xff0c;在公告中乌…