【Vue3】学习笔记-shallowReactive与ShallowRef

news2024/12/23 10:48:50
  • shallowReactive:只处理对象最外层属性的响应式(浅响应式)。

  • shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。

  • 什么时候使用?

    • 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
    • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。
<template>
	<h4>当前的x.y值是:{{x.y}}</h4>
	<button @click="x={y:888}">点我替换x</button>
	<button @click="x.y++">点我x.y++</button>
	<hr>
	<h4>{{person}}</h4>
	<h2>姓名:{{name}}</h2>
	<h2>年龄:{{age}}</h2>
	<h2>薪资:{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRef,toRefs,shallowReactive,shallowRef} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			// let person = shallowReactive({ //只考虑第一层数据的响应式
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
			let x = shallowRef({
				y:0
			})
			console.log('******',x)

			//返回一个对象(常用)
			return {
				x,
				person,
				...toRefs(person)
			}
		}
	}
</script>


在这里插入图片描述

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

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

相关文章

【笔记】华南理工大学-智能计算方法 考试重点笔记 [非常详细]

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 目录 大纲 主观题 简答题 大纲 主观题 大题&#xff0c;40分&#xff0c;智能计算与自己专业方向结合&#xff0c;思路、图、公式等均可。 简答题

C/C++服务器和客户端交互笔记

C/C服务器开发 网络与通信Socket Socket通信三要素&#xff1a;通信的目的地址、使用的端口号&#xff08;http 80 / smtp 25&#xff09;、使用的传输协议&#xff08;TCP、UDP&#xff09;。 nslookup xx 可以查询xx网址的IP地址。 Socket通信模型 telnet ipxx 进行主机…

在ik分词器中自定义配置分词

找到ik分词器安装目录下的IKAnalyzer.cfg.xml配置文件 打开后就有让我们配置扩展字典的位置,还有停止的,这里的文件名完全自定义 当写完后然后再安装目录下创建这两个文件夹 在创建完成后重启elasticsearch即可 如果配置未生效很有可能是文件的编码格式有问题,我们将编码改为UT…

Linux-扩展篇-RPM和Yum-克隆和快照

扩展篇 学自尚硅谷武晟然老师&#xff0c;结合老师课堂内容和自己笔记所写博文。 文章目录 扩展篇软件包管理一、RPM1、RPM概述2、命令查询命令卸载命令安装命令 二、yum1、yum概述2、命令3、修改网络yum源 克隆虚拟机克隆快照 Shell编程Shell 概述 软件包管理 一、RPM 1、RP…

WIN11系统安装MySql8.0.15详细安装

一.下载mysql8.015数据库 下载地址&#xff1a; 如下图所示 此处下载的是8.0.15版本&#xff0c;免安装版&#xff0c;系统为64位系统&#xff1a; 二&#xff0c;配置mysql环境变量: D:\program_file_worker\mysql8.15\mysql-8.0.15-winx64\bin 三. 环境配置完成后&#xff…

优化设备管理,半导体CMS系统的重要性和优势解析

在半导体制造行业中&#xff0c;设备管理对于企业的生产效率和成本控制起着至关重要的作用。随着技术的不断进步和市场的竞争加剧&#xff0c;企业需要更加精细化、智能化地管理设备&#xff0c;以提高生产效率、降低维修成本&#xff0c;并确保产品质量的稳定性。 图.半导体芯…

vue 对话框内容超出组件问题

遇到这种问题该怎么解决, 样式问题 很好解决 解决方案很简单: 用flex布局的flex-wrap: wrap 数据 自适应布局 水了一篇 哈哈哈

管理类联考——数学——趣味篇——公式——图形推导

&#x1f3e0;个人主页&#xff1a;fo安方的博客✨ &#x1f482;个人简历&#xff1a;大家好&#xff0c;我是fo安方&#xff0c;考取过HCIE Cloud Computing、CCIE Security、CISP、RHCE、CCNP RS、PEST 3等证书。&#x1f433; &#x1f495;兴趣爱好&#xff1a;b站天天刷&…

SNMP 计算机网络管理 实验1(三) 练习与使用Wireshark抓取SNMP数据包抓包之任务四 分析并验证ARP协议数据单元的格式;

⬜⬜⬜ &#x1f430;&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;(*^▽^*)欢迎光临 &#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;&#x1f430;⬜⬜⬜ ✏️write in front✏️ &#x1f4dd;个人主页&#xff1a;陈丹宇jmu &am…

【python】__init__.py 文件的作用

先看文件夹组成&#xff1a; 可以看到&#xff0c;几乎每个文件夹下都有__init__.py&#xff0c;一个目录如果包含了__init__.py 文件&#xff0c;那么它就变成了一个包&#xff08;package&#xff09;。__init__.py可以为空&#xff0c;也可以定义包的属性和方法&#xff0…

Java开发 - Canal进阶之和Redis的数据同步

前言 Canal在数据同步中是非常常见的&#xff0c;一般我们会用它来做MySQL和Redis之间、MySQL和ES之间的数据同步&#xff0c;否则就是手动通过代码进行同步&#xff0c;造成代码耦合度高的问题&#xff0c;这并不是我们愿意看见的&#xff0c;今天这篇博客博主将给大家演示Ca…

速下载|2023上半年网络与数据安全法规政策、国标、报告合集

随着国家数字经济建设进程加快&#xff0c;数据安全立法实现由点到面、由面到体加速构建&#xff0c;目前我国数据安全立法已基本形成以《网络安全法》《数据安全法》《个人信息保护法》《密码法》等法律为核心&#xff0c;行政法规、部门规章为依托&#xff0c;地方性法规、地…

【全文搜索选型】全文搜索 PostgreSQL 或 ElasticSearch

在本文中&#xff0c;我记录了在 PostgreSQL&#xff08;使用 Django ORM&#xff09;和 ElasticSearch 中实现全文搜索 (FTS) 时的一些发现。 作为一名 Django 开发人员&#xff0c;我开始寻找可用的选项来在大约一百万行的标准大小上执行全文搜索。有两个值得尝试的选项&…

百度文心一言App已在AppStore上架—特别是发现页的功能太强大了

百度文心一言 App 现已上架苹果 App Store&#xff0c;所有用户可免费下载安装。 特别是发现页的功能&#xff0c;真的太强大了&#xff0c;基本涵盖了你所有已知的 AI 工具功能&#xff01;比如&#xff1a; 小红书探店文案、风格头像、朋友圈神器、短视频脚本生成、AI 绘画…

【ESP32 开发】| Clion 搭建 ESP32 开发环境

目录 前言1 软件以及所需工具2 安装 ESP-IDF 4.4.42.1 开始安装2.2 选择组件&#xff0c;建议全选 3 用 ESP-IDF 4.4 CMD 添加环境变量并新建工程3.1 打开 ESP-IDF 4.4 CMD 初始化环境变量3.2 切到工作路径并新建工程 4 配置 Clion 开发环境4.1 用 Clion 打开新建的工程文件4.2…

有了企业网盘,为什么要需要知识文档管理系统

关键词&#xff1a;企业网盘、知识文档管理系统、群晖NAS 编者按&#xff1a;随着企业办公室自动化的要求越来越明显&#xff0c;企业对于文档存储的需求也逐渐加大。企业网盘的出现解决了公司文件数据储存等难题。但随着企业的文档数据逐渐增多&#xff0c;如何安全管理企业重…

蓝牙资讯|苹果AirPods Pro充电盒将换用USB-C接口,还有新功能在测试

据彭博社记者 Mark Gurman 在他的最新一期 Power On 时事通讯中报道&#xff0c;苹果正准备推出适用于 AirPods Pro 的 USB-C 充电盒&#xff0c;大概会在今年秋天与 iPhone 15 系列一起推出&#xff0c;后者也将从 Lightning 端口切换到 USB-C 端口。 此外&#xff0c;苹果也…

Java集合之Disruptor 介绍

文章目录 1 Disruptor1.1 简介1.1.1 定义1.1.2 Java中线程安全队列1.1.3 Disruptor 核心概念 1.2 操作1.2.1 坐标依赖1.2.2 创建事件1.2.3 创建事件工厂1.2.4 创建处理事件Handler--消费者1.2.5 初始化 Disruptor1.2.5.1 静态类1.2.5.2 配置类1.2.5.3 Disruptor 构造函数讲解 1…

uniapp仿浙北汇生活微信小程序

最近给公司写了一个内部微信小程序&#xff0c;功能比较简单&#xff0c;之前是用微信小程序原生写的&#xff0c;一遍看文档一边写&#xff0c;js&#xff0c;wxml&#xff0c;wxcc&#xff0c;json分在不同文件的写法很不习惯&#xff0c;于是花了两天用uniapp重写了一遍&…

TextMining day1 电力设备运维过程中的短文本挖掘框架

电力设备运维过程中的短文本挖掘框架 III. 短文本挖掘框架的具体设计A. 预处理模块的具体设计B. 数据清洗模块的具体设计C. 表示模块的具体设计D. 数据分析模块的具体设计 IV. 案例研究A. 基于文本分类的缺陷程度判断B. 基于文本检索的缺陷处理决策 V. 结论 预处理 首先&#x…