当前位置: 首页 > news >正文

Vue创建浅层响应式数据

shallowReactive:只处理对象第一层数据的响应式(浅响应式)。

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

shallowReactive 适用于:如果有一个对象类型的数据,结构比较深,但变化时只是外层属性会变化。

shallowRef 适用于:如果有一个对象类型的数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换。

 只考虑第一层数据的响应式 shallowReactive 函数:

<template><h2>姓名:{{ info.name }}</h2><h2>年龄:{{ info.age }}</h2><h2>薪资:{{ info.job.money }}</h2><button @click="info.name += '风'">修改姓名</button><button @click="info.age++">修改年龄</button><button @click="info.job.money++">增加薪资</button>
</template><script>
// 引入 shallowReactive 函数
import { shallowReactive } from 'vue'
export default {name: "Home",setup() {// 只考虑第一层数据的响应式let info = shallowReactive({name: "张三",age: 18,job: {money: 20}})// 返回数据return { info }}
}
</script>

:使用 shallowReactive 创建的数据,只有第一层是响应式的,深层数据修改后,页面不会实时更新。


 

只考虑基本数据类型的响应式 shallowRef 函数 :

<template><h2>数字:{{ sum }}</h2><button @click="sum++">数据+1</button><hr /><h2>姓名:{{ info.name }}</h2><button @click="info = { name: '李四' }">修改姓名</button><hr /><h2>年龄:{{ user.age }}</h2><button @click="user.age++">增加年龄</button>
</template><script>
// 引入 shallowRef 函数
import { shallowRef } from 'vue'
export default {name: "Home",setup() {// 只处理基本数据类型的响应式let sum = shallowRef(10);// 直接替换这个对象时,页面也会更新let info = shallowRef({name: "张三"})// 不处理对象类型的响应式let user = shallowRef({age: 18})// 返回数据return { sum, info, user }}
}
</script>

:使用 shallowRef 创建基础数据类型是响应式的,创建对象数据类型就不是响应式的了。但可以直接替换这个对象,页面也会实时更新。

原创作者:吴小糖

创建时间:2023.11.7

相关文章:

Vue创建浅层响应式数据

shallowReactive&#xff1a;只处理对象第一层数据的响应式&#xff08;浅响应式&#xff09;。 shallowRef&#xff1a;只处理基本数据类型的响应式&#xff0c;不处理对象类型的响应式。 shallowReactive 适用于&#xff1a;如果有一个对象类型的数据&#xff0c;结构比较深…...

【Python 千题 —— 基础篇】判断列表是否为空

题目描述 题目描述 编写一个程序&#xff0c;给出一个列表&#xff0c;判断该列表是否为空。如果该列表为空&#xff0c;输出 “The list is empty”&#xff1b;如果不为空&#xff0c;输出 “The list is not empty”。 输入描述 无输入。 输出描述 根据该列表是否为空…...

基于Java+SpringBoot+Mybaties-plus+Vue+ElementUI 失物招领小程序 设计与实现

一.项目介绍 失物招领小程序 用户登录、忘记密码、退出系统 发布失物 和 发布招领 查看我发布的失物和招领信息 失捡物品模块可以查看和搜索所有用户发布的信息。 二.环境需要 1.运行环境&#xff1a;java jdk1.8 2.ide环境&#xff1a;IDEA、Eclipse、Myeclipse都可以&#…...

找到【SVM】中最优的惩罚项系数C

因为本来SVM是想找到间隔最大的分割面&#xff0c;所以C越大&#xff0c;SVC会选择边际更小的&#xff0c;能够更好的分类所有训练点的决策边界&#xff0c;不过模型的训练时间也会越长。如果C的设定值较小&#xff0c;那SVC会尽量最大化边界&#xff0c;决策功能会更简单&…...

Go 面向对象,多态

面向对象 工程结构 新建一个oop.go package _oop // Package _oop 引用名称import ("fmt""strconv" )// GIRL 常量 const (// GIRL 自增GIRL Gender iotaFIRSTSECONDTHIRD )type Gender uint8 // 无符号的8位整数类型// User 结构体 type User struct…...

Anaconda如何创建一个环境

activate env_name 激活环境&#xff0c;env_name&#xff1a;环境名 deactivate env_name 激活环境 conda list …...

【gerrit】【技巧】如何获取gerrit库入库统计信息之三——gerrit搜索之时间过滤条件

&#x1f41a;作者简介&#xff1a;花神庙码农&#xff08;专注于Linux、WLAN、TCP/IP、Python等技术方向&#xff09;&#x1f433;博客主页&#xff1a;花神庙码农 &#xff0c;地址&#xff1a;https://blog.csdn.net/qxhgd&#x1f310;系列专栏&#xff1a;善假于物&#…...

wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格,有点像excel里的合并单元格。使其余的列平均分配剩余的空间

比如只有行的界面 <Window x:Class"GenerateTokenApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/exp…...

js 高效生成连续递增的小数数组

简介 JavaScript 按照指定间隔生成连续递增的数组。 1. 循环生成 function generateIncrementalArray(start, end, step) {const result [];for (let i start; i < end; i step) {result.push(parseFloat(i.toFixed(1))); // 使用 toFixed() 方法限定小数位数}return r…...

『昆仑天工』4款AI产品开源!提供API对接!

在文章开篇&#xff0c;小圈先介绍下 昆仑万维 公司旗下的AI大模型**『天工』**&#xff0c;它是由昆仑万维自研的双千亿级大语言模型&#xff0c; 也是国内首个对标ChatGPT的双千亿级大语言模型&#xff0c;可满足文案创作、知识问答、代码编程、逻辑推演、数理推算等需求。 …...

C语言--每日五道选择题--Day2

第一题&#xff1a; 1、有如下代码&#xff0c;则 *(p[0]1) 所代表的数组元素是&#xff08; &#xff09; int a[3][2] {1, 2, 3, 4, 5, 6}, *p[3]; p[0] a[1]; A: a[0][1] B: a[1][0] C: a[1][1] D: a[1][2] 答案及解析&#xff1a;C 首先要明确p是一个指针数组 p[0] a[…...

C++——类和对象(初始化列表、匿名对象、static成员、类的隐式类型转换和explicit关键字、内部类)

初始化列表、匿名对象、static成员、类的隐式类型转换和explicit关键字、内部类 本章思维导图&#xff1a; 注&#xff1a;本章思维导图对应的xmind文件和.png文件都已同步导入至资源 文章目录 初始化列表、匿名对象、static成员、类的隐式类型转换和explicit关键字、内部类1.…...

高德地图撒点组件

一、引入amap地图库 - public/index.html <script type"text/javascript">window._AMapSecurityConfig {securityJsCode: 地图密钥 }</script><scripttype"text/javascript"src"https://webapi.amap.com/maps?v1.4.8&key111111…...

TCP/IP协议群

TCP/IP协议群 什么是TCP/IP协议群 从字面意义上讲&#xff0c;有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议。实际生活当中有时也确实就是指这两种协议。然而在很多情况下&#xff0c;它只是利用 IP 进行通信时所必须用到的协议群的统称。具体来说&#xff0c;IP 或 ICMP、…...

esxi 6.7下安装黑裙

esxi上创建一个黑裙系统的虚拟机&#xff0c;用来存资料 一、工具 硬件&#xff1a; 工控机&#xff1a;装有esxi6.7系统&#xff08;192.168.100.2&#xff09;&#xff0c;配置&#xff1a;3865U&#xff0c;16G内存&#xff0c;120Gmsata120sata硬盘&#xff0c;6个网口 主…...

C++初阶-类和对象(下)

类和对象&#xff08;下&#xff09; 一、再谈构造函数构造函数体赋值初始化列表explicit关键字 二、static成员概念特性 三、友元友元函数友元类 四、内部类五、匿名对象六、拷贝对象时的一些编译器优化七、再次理解类和对象 一、再谈构造函数 构造函数体赋值 在创建对象时&a…...

MD5校验 C语言实现 (附源码)

1.简介 MD5即Message-Digest Algorithm 5&#xff08;信息-摘要算法5&#xff09;&#xff0c;用于确保信息传输完整一致。是计算机广泛使用的杂凑算法之一&#xff08;又译摘要算法、哈希算法&#xff09;&#xff0c;主流编程语言普遍已有MD5实现。 MD5算法具有以下特点&am…...

成功解决/bin/sh: cc: command not found和/bin/sh: g++: command not found

成功解决/bin/sh: cc: command not found和/bin/sh: g: command not found 目录 解决问题 解决思路 解决方法 解决问题 make: cc: Command not found /bin/sh: cc: command not found expr: syntax error expr: syntax error make: cc: Command not found I llama.cpp buil…...

理解ELMo 模型

ELMo是一种用于处理自然语言的技术&#xff0c;它能够帮助计算机更好地理解词语在不同上下文中的含义。比如&#xff0c;在句子"他去银行取钱"&#xff08;"He went to the bank to withdraw money"&#xff09;和"他在河岸边钓鱼"&#xff08;&…...

oracle 基础语法总结

常用简单查询汇总&#xff08;必须掌握&#xff0c;记不住的收藏以备查看&#xff09; 1、查询有奖金的员工: select* from emp where comm is not null; 2、查询没有奖金的员工信息: select * from emp where comm is null; 3、两个条件以上就得用and 如查询工资大于1500和有…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...