Vue响应式状态ref()与reactive()

1. ref()声明响应式状态

<template><!--DOM元素调用变量时,不需要指定输出变量的value,因为Vue会帮你输出.value但是注意,这个帮助只会帮助顶级的ref属性才会被解包--><div>{{ count }}</div><div>{{ object }}</div><div>{{ array }}</div>
</template>
<script setup>
//从vue中获取ref方法
import { ref } from "vue";name: "App";
console.log('--------------------------------------------------------------------------')
//定义一个变量count,设置为响应式,初始值为0
let count = ref(0);
//输出变量count的值,结果为RefImpl对象,其内部会有被数据劫持的value
console.log('count:',count);
//输出变量count的value值,结果为0
console.log('count.value:',count.value);
//实现对变量的操作,0+1
count.value++;
//再次输出变量count的value值,结果为1
console.log('+1后的count.value:',count.value);console.log('------------------------------ref使用对象-------------------------------------')//定义一个对象,使用ref声明其状态为响应式
let object=ref({id:1,name:'小绿'
})
//输出object的value值为Proxy(Object) {id: 1, name: '小绿'}
console.log('其value:',object.value)
//输出object下name的值为小绿
console.log('对象object的name值:',object.value.name)
//修改object的name值为小红
object.value.name='小红'
//输出修改后的object的name值为小红
console.log('修改object的name值后输出:',object.value.name)console.log('------------------------------ref使用数组-------------------------------------')
let array=ref(['洗澡','学习','唱歌'])
//输出array的value值为Proxy(Array) {0: '洗澡', 1: '学习', 2: '唱歌'}
console.log('其value:',array.value)
//输出array下标为0的值为洗澡
console.log('对象array的下标为0的值:',array.value[0])
//修改array下标为0的值为打扑克
array.value[0]='打扑克'
//输出修改后的array下标为0值为打扑克
console.log('改后的array下标为0值输出:',array.value[0])
</script><style scoped>
</style>

在这里插入图片描述
HTML输出
1
{ “id”: 1, “name”: “小红” }
[ “打扑克”, “学习”, “唱歌” ]

2. reactive()使对象本身具有响应性

<template><!--DOM元素调用变量时,不需要指定输出变量的value,因为Vue会帮你输出.value但是注意,这个帮助只会帮助顶级的ref属性才会被解包--><div>{{ state.count }}</div><div>{{ array[0] }}</div>
</template>
<script setup>
//从vue中获取ref方法
import { reactive } from "vue";name: "App";
console.log('------------------------------reactive使用对象-------------------------------------')
//定义一个对象state,设置其响应性,state对象的count属性值为0
let state = reactive({count:0
});
//输出state对象值
console.log('state对象值为:',state)
//输出state对象的count属性值
console.log('state对象的count属性值为:',state.count)
//设置state对象的属性count值为1
state.count++
//输出state对象的count属性加1后的值
console.log('输出state对象的count属性加1后的值:',state.count)console.log('------------------------------reactive使用数组-------------------------------------')
//定义数组,设置其响应性
let array = reactive(['洗澡','学习','唱歌']);
//输出array数组值
console.log('array数组值为:',array)
//输出array数组下标为0的值
console.log('array数组下标为0的值为:',array[0])
//设置array数组下标为0的值为看电视
array[0]='看电视'
//输出array数组下标为0的数据修改后的值
console.log('输出array数组下标为0的数据修改后的值:',array[0])console.log('------------------------------数据原理及注意事项-------------------------------------')
//reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的
const raw={}
const proxy=reactive(raw)
console.log('对比proxy与raw设置响应性后是否相等:',proxy===raw)//对同一个原始对象调用 reactive() 会总是返回同样的代理对象,而对一个已存在的代理对象调用 reactive() 会返回其本身
console.log('对同一个原始对象raw调用reactive():',proxy===reactive(raw))
console.log('对一个已存在的代理proxy对象调用reactive():',proxy===reactive(proxy))//依靠深层响应性,响应式对象内的嵌套对象依然是代理
const proxy1=reactive({})
proxy.nested = raw
console.log('proxy1嵌套对象nested与raw是否相等:',proxy.nested===raw)
</script><style scoped>
</style>

在这里插入图片描述

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

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

相关文章

git切换仓库地址

已有git仓库&#xff0c;要切换提交的仓库地址&#xff0c;用以下命令 git remote set-url origin 自己的仓库地址 用以下命令&#xff0c;查看当前仓库地址&#xff1a; git remote show origin 切换仓库后&#xff0c;用以下命令初始化提交仓库&#xff1a; git push -u o…

数据库增删改查

DDL: 数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表、字段&#xff09;DML: 数据操作语言&#xff0c;用来对数据库表中的数据进行增删改DQL: 数据查询语言&#xff0c;用来查询数据库中表的记录DCL: 数据控制语言&#xff0c;用来创建数据库用户、控制数…

c++11:可调用对象

文章目录 引言1.普通函数2.函数指针3.函数对象(仿函数)4.Lambda表达式(匿名函数)5.function6.bind 引言 可调用对象是C11引入的新概念&#xff0c;可以像函数调用方式的触发调用的对象就是可调用对象。 c98可调用对象(普通函数&#xff0c;函数指针&#xff0c;仿函数) c11可调…

Java设计模式【代理模式】

一、前言 1.1 背景 在不改变原有代码的基础上&#xff0c;对方法进行功能性的增强&#xff1b; 1.2 简介 代理模式是一种结构型模式&#xff0c;为其他对象提供一种代理以控制对这个对象的访问。在某些情况下&#xff0c;一个对象不想或者不能直接引用另一个对象&#xff0…

axure9.0 工具使用思考

原型设计软件【AxureRP】快速原型设计工具原型设计软件【AxureRP】快速原型设计工具原型设计软件【AxureRP】快速原型设计工具原型设计软件【AxureRP】快速原型设计工具原型设计软件【AxureRP】快速原型设计工具原型设计软件【AxureRP】快速原型设计工具原型设计软件【AxureRP】…

CentOS使用Docker搭建Halo网站并实现无公网ip远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…

【华为OD机试真题 C++语言】483、中文分词模拟器 | 机试真题+思路参考+代码解析(C卷)

文章目录 一、题目🎃题目描述🎃输入输出🎃样例1🎃样例2🎃样例3二、思路参考三、代码参考作者:KJ.JK🍂个人博客首页: KJ.JK 🍂专栏介绍: 华为OD机试真题汇总,定期更新华为OD各个时间阶段的机试真题,每日定时更新,本专栏将使用C++语言进行更新解答,包含真…

创纪录:英伟达市值一日增 2770 亿美元;Xiaomi 14 Ultra 正式发布丨 RTE 开发者日报 Vol.150

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

mysql 用户权限管理

mysql使用系统库mysql的user表来存储用户信息。mysql.user表详细的记录了用户名&#xff0c;对应的允许连接的主机信息还有各种全局权限标识位。 用户管理 创建用户 CREATE USER 用户名host主机 IDENTIFIED BY 密码;上面是创建用的基本命令&#xff0c;指定了用户名&#xf…

Selenium基础知识

一、环境搭建&#xff08;以java为例&#xff09; 1.下载chrome浏览器 https://www.google.cn/intl/zh-CN/chrome/ 2.查看chrome浏览器版本 设置关于chrome 3.下载chrome浏览器驱动 下载浏览器对应版本的 ChromeDriver - WebDriver for Chrome - Downloads 120以上版本&…

WordPress使用

WordPress功能菜单 仪表盘 可以查看网站基本信息和内容。 文章 用来管理文章内容&#xff0c;分类以及标签。编辑文章以及设置分类标签&#xff0c;分类和标签可以被添加到 外观-菜单 中。 分类名称自定义&#xff1b;别名为网页url链接中的一部分&#xff0c;最好别设置为中文…

概率密度函数(PDF)与神经网络中的激活函数

原创:项道德(daode3056,daode1212) 在量子力学中&#xff0c;许多现象都是统计的结果&#xff0c;基本上用的是正态分布&#xff0c;然而&#xff0c;从本质上思考&#xff0c;应该还存在低阶的分布&#xff0c;标准的正态分布是它的极限&#xff0c;这样一来&#xff0c;或许在…

python中多线程使用

前言 记录下Python中多线程使用 标题 前言简介使用demo 简介 Python 中的多线程主要通过 threading 模块来实现。多线程是一种并发编程的方式&#xff0c;允许程序在同一时间执行多个线程&#xff0c;每个线程执行不同的任务。然而需要注意的是&#xff0c;在 Python 中由于 …

【前端素材】推荐优质后台管理系统Spica Admin平台模板(附源码)

一、需求分析 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;它通常作为一个独立的后台界面存在&#xff0c;供管理员或特定用户使用。下面详细分析后台管理系统的定义和功能&#xff1a; 1. 定义 后台管理系统是一个用于管理和控制网站、应用程序或系统…

【安全】大模型安全综述

大模型相关非安全综述 LLM演化和分类法 A survey on evaluation of large language models,” arXiv preprint arXiv:2307.03109, 2023.“A survey of large language models,” arXiv preprint arXiv:2303.18223, 2023.“A survey on llm-gernerated text detection: Necess…

刷题日记-Day1- Leedcode-704. 二分查找,27. 移除元素-Python实现

704 二分查找 链接&#xff1a;https://leetcode.cn/problems/binary-search/description/ 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xf…

vue3 toRefs之后的变量修改方法

上效果 修改值需要带上解构之前的对象名obj&#xff0c; changeName:()>{ // toRefs 解决后变量修改值方法&#xff1a; 解构前变量.字段新值 obj.name FEIFEI; } } 案例源码 <!DOCTYPE html> <html> <head><me…

如何在pgAdmin中用替换的值更新jsonb列?

我有一个名为files的PostgreSQL表&#xff0c;其中包括一个名为formats的jsonb表。虽然有些行是[null]&#xff0c;但其他行具有此结构的对象&#xff1a; {"thumbnail": {"ext": ".jpg","url": "https://some-url.com/image01.…

Vue | (四)使用Vue脚手架(上) | 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;初始化脚手架&#x1f407;创建初体验&#x1f407;分析脚手架结构&#x1f407;关于render&#x1f407;查看默认配置 &#x1f4da;ref与props&#x1f407;ref属性&#x1f407;props配置项 &#x1f4da;混入&#x1f4da;插件&#x1f4da;scoped样…

idea配置javafx

一、下载sdk 在jdk8之后,需要下载sdk包 📎javafx-sdk-18.zip 这里适用的jkd版本如图 二、配置 创建一个项目之后,进行如下配置,将sdk导入到项目中 配置启动参数 可以使用-号将之前的去掉&