当前位置: 首页 > 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和有…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...