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

Vue3-shallowRef 和 shallowReactive函数(浅层次的响应式)

Vue3-shallowRef 和 shallowReactive函数(浅层次的响应式)

shallowRef函数

  • 功能:只给基本数据类型添加响应式。如果是对象,则不会支持响应式,层成也不会创建Proxy对象。
  • ref和shallowRef在基本数据类型上是没有区别的,shallowRef函数主要作用于不进行修改对象中的属性。

在这里插入图片描述

<template><h2>计数器1{{data.counter1}}</h2><button @click="data.counter1++">计数器11</button>
</template><script setup>import { shallowRef } from 'vue'let data = shallowRef({counter1 : 1})console.log(data);
</script>

shallowReactive函数

  • 功能:shallowReactive 对象中只有第一层支持响应式,之后的都不支持响应式。

在这里插入图片描述

<template><h2>计数器1{{data.counter1}}</h2><button @click="data.counter1++">计数器11</button><hr><h2>计数器2{{data.a.counter2}}</h2><button @click="data.a.counter2++">计数器21</button>
</template><script setup>import { shallowReactive } from 'vue'let data = shallowReactive({counter1 : 1,a : {counter2 : 100}})
</script>counter2 : 100}})
</script>

相关文章:

Vue3-shallowRef 和 shallowReactive函数(浅层次的响应式)

Vue3-shallowRef 和 shallowReactive函数&#xff08;浅层次的响应式&#xff09; shallowRef函数 功能&#xff1a;只给基本数据类型添加响应式。如果是对象&#xff0c;则不会支持响应式&#xff0c;层成也不会创建Proxy对象。ref和shallowRef在基本数据类型上是没有区别的…...

ExoPlayer架构详解与源码分析(8)——Loader

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…...

ExoPlayer架构详解与源码分析(9)——TsExtractor

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…...

【Python 千题 —— 基础篇】输出列表方差

题目描述 题目描述 输出列表的方差。题中有一个包含数字的列表 [10, 39, 13, 48, 32, 10, 9]&#xff0c;使用 for 循环获得这个列表中所有项的方差。 输入描述 无输入。 输出描述 输出列表的方差。 示例 示例 ① 输出&#xff1a; 列表的方差是&#xff1a;228.0代码…...

【Spring总结】基于配置的方式来写Spring

本篇文章是对这两天所学的内容做一个总结&#xff0c;涵盖我这两天写的所有笔记&#xff1a; 【Spring】 Spring中的IoC&#xff08;控制反转&#xff09;【Spring】Spring中的DI&#xff08;依赖注入&#xff09;Dependence Import【Spring】bean的基础配置【Spring】bean的实…...

Unity在Windows选项下没有Auto Streaming

Unity在Windows选项下没有Auto Streaming Unity Auto Streaming插件按网上说的不太好使最终解决方案 Unity Auto Streaming插件 我用的版本是个人版免费版&#xff0c;版本号是&#xff1a;2021.2.5f1c1&#xff0c;我的里边Windows下看不到Auto Streaming选项,就像下边这张图…...

下厨房网站月度最佳栏目菜谱数据获取及分析

目录 概要 源数据获取 写Python代码爬取数据 Scala介绍与数据处理 1.Sacla介绍...

【Java 进阶篇】深入理解 JQuery 事件绑定:标准方式

在前端开发中&#xff0c;处理用户与页面的交互是至关重要的一部分。JQuery作为一个广泛应用的JavaScript库&#xff0c;为我们提供了简便而强大的事件绑定机制&#xff0c;使得我们能够更加灵活地响应用户的行为。本篇博客将深入解析 JQuery 的标准事件绑定方式&#xff0c;为…...

某app c++层3处魔改md5详解

hello everybody,本期是安卓逆向so层魔改md5教学,干货满满,可以细细品味,重点介绍的是so层魔改md5的处理. 常见的魔改md5有: 1:明文加密前处理 2:改初始化魔数 3:改k表中的值 4:改循环左移的次数 本期遇到的是124.且循环左移的次数是动态的,需要前面的加密结果处理生成 目录…...

安装MongoDB

查看MongoDB版本可以执行如下命令 mongod --version 如果是Ubuntu&#xff0c;则直接安装 sudo apt-get install -y mongodb如果是其他&#xff0c;比如Amazon Linux2。 查看Linux系统发行版类型 grep ^NAME /etc/*release 如果是 Amazon Linux 2&#xff0c;则创建一个r…...

C++加持让python程序插上翅膀——利用pybind11进行c++和python联合编程示例

目录 0、前言1、安装 pybind11库c侧python侧 2、C引入bybind11vs增加相关依赖及设置cpp中添加头文件及导出模块cpp中添加numpy相关数据结构的接收和返回编译生成dll后改成导出模块同名文件的.pyd 3、python调用c4、C引入bybind11 0、前言 在当今的计算机视觉和机器学习领域&am…...

ubuntu20.04安装cv2

查看ubuntu的版本 cat /etc/lsb-release DISTRIB_IDUbuntu DISTRIB_RELEASE20.04 DISTRIB_CODENAMEfocal DISTRIB_DESCRIPTION"Ubuntu 20.04.3 LTS"更改镜像源 cp /etc/apt/sources.list /etc/apt/sources.list.bak cat > /etc/apt/sources.listdeb http://mirr…...

Android 13.0 recovery出厂时清理中字体大小的修改

1.前言 在13.0的系统rom定制化开发中,在recovery模块也是系统中比较重要的模块,比如恢复出厂设置,recovery ota升级, 清理缓存等等,在一些1080p的设备,但是density只是240这样的设备,会在恢复出厂设置的时候,显示的字体有点小, 产品要求需要将正在清理的字体调大点,这…...

spring+pom-注意多重依赖时的兼容问题[java.lang.NoSuchMethodError]

背景&#xff1a; 项目中同时引入了依赖A和依赖B&#xff0c;而这两个依赖都依赖于项目C&#xff0c;但它们指定的C版本不一致&#xff0c;导致运行时出现了错误。 报错如&#xff1a; java.lang.NoSuchMethodError 解决方案&#xff1a; 需要在项目pom文件中引入依赖C并指定需…...

Matalab插值详解和源码

转载&#xff1a;Matalab插值详解和源码 - 知乎 (zhihu.com) 插值法 插值法又称“内插法”&#xff0c;是利用函数f (x)在某区间中已知的若干点的函数值&#xff0c;作出适当的特定函数&#xff0c;在区间的其他点上用这特定函数的值作为函数f (x)的近似值&#xff0c;这种方…...

Flask 接口

目录 前言 代码实现 简单接口实现 执行其它程序接口 携带参数访问接口 前言 有时候会想着开个一个接口来访问试试&#xff0c;这里就给出一个基础接口代码示例 代码实现 导入Flask模块&#xff0c;没安装Flask 模块需要进行 安装&#xff1a;pip install flask 使用镜…...

Vue3 toRef函数和toRefs函数

当我们在setup 中的以读取对象属性单独交出去时&#xff0c;我们会发现这样会丢失响应式&#xff1a; setup() {let person reactive({name: "张三",age: 18,job: {type: "前端",salary:10}})return {name: person.name,age: person.age,type: person.jo…...

【论文阅读】(VAE-GAN)Autoencoding beyond pixels using a learned similarity metric

论文地址;[1512.09300] Autoencoding beyond pixels using a learned similarity metric (arxiv.org) / 一、Introduction 主要讲了深度学习中生成模型存在的问题&#xff0c;即常用的相似度度量方式&#xff08;使用元素误差度量&#xff09;对于学习良好的生成模型存在一定…...

verilog之wire vs reg区别

文章目录 一、wire vs reg二、实例一、wire vs reg wire线网: 仅支持组合逻辑建模必须由assign语句赋值不能在always块中驱动用于连接子模块的输出用于定义模块的输入端口reg寄存器: 可支持组合逻辑或时序逻辑建模必须在always块中赋值二、实例 wire [7:0] cnt; assign cnt …...

力扣面试经典150题详细解析

刷题的初心 众所周知&#xff0c;算法题对于面试大厂是必不可缺的一环&#xff0c;而且对于提高逻辑思维能力有着不小的提升。所以&#xff0c;对于程序员来讲&#xff0c;无论刚入行&#xff0c;还是从业多年&#xff0c;保持一个清醒的头脑&#xff0c;具备一个良好的设计思…...

不止于搭建:在Kali上配置DVWA靶场后,你的第一个安全测试实战指南

不止于搭建&#xff1a;在Kali上配置DVWA靶场后&#xff0c;你的第一个安全测试实战指南 当你第一次看到DVWA的登录界面时&#xff0c;那种既兴奋又迷茫的感觉我太熟悉了。就像拿到了一套精密的医疗器械&#xff0c;却不知道从哪个部位开始检查。别担心&#xff0c;这篇文章将…...

如何让foobar2000界面脱胎换骨?3大设计理念打造个性化音乐体验

如何让foobar2000界面脱胎换骨&#xff1f;3大设计理念打造个性化音乐体验 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 副标题&#xff1a;从安装到定制&#xff1a;零基础也能掌握的foobox-cn美化…...

intv_ai_mk11效果惊艳案例:为初创公司1小时生成完整BP商业计划书框架

intv_ai_mk11效果惊艳案例&#xff1a;为初创公司1小时生成完整BP商业计划书框架 1. 商业计划书生成效果展示 1.1 从零到完整的商业计划书 intv_ai_mk11在商业计划书生成方面展现出惊人的效率和质量。我们实测了一个真实案例&#xff1a;一家智能硬件初创公司需要准备融资用…...

保姆级教程:在OBBDetection项目中为DOTA数据集定制检测结果可视化(mmdetection 2.2)

深度定制OBBDetection检测结果可视化&#xff1a;DOTA数据集高级实践指南 在旋转目标检测领域&#xff0c;DOTA数据集因其复杂的航拍场景和多角度目标特性&#xff0c;对结果可视化提出了独特挑战。本文将带您从零构建一套完整的可视化解决方案&#xff0c;涵盖从基础配置到高级…...

新手福音:用快马平台将vmware官网概念转化为可交互的虚拟机演示代码

作为一名刚接触虚拟化技术的新手&#xff0c;我最近在VMware官网上看到了关于虚拟机的基础概念介绍。虽然理论知识很全面&#xff0c;但总觉得少了点动手实践的环节。直到发现了InsCode(快马)平台&#xff0c;它让我能够把抽象的概念快速转化为可运行的代码&#xff0c;这种学习…...

5大核心功能解密:douyin-downloader抖音下载器实战指南

5大核心功能解密&#xff1a;douyin-downloader抖音下载器实战指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback supp…...

整理‌ 主流国产AI龙虾的核心能力对比表(支持平台/部署方式/适用场景)腾讯WorkBuddy‌ ‌阿里JVS Claw 百度DuMate

根据当前的资料&#xff0c;腾讯WorkBuddy和百度的DuMate当前有一定一定量的免费额度&#xff0c;大家可以用起来&#xff01; 主流国产AI龙虾的核心能力对比表 五款主流国产AI龙虾的核心能力对比表已整理完成&#xff0c;涵盖支持平台、部署方式与适用场景三大维度&#xff…...

OLED多级菜单移植与设计实战

1. 低成本嵌入式项目的OLED多级菜单设计 第一次接触OLED多级菜单是在一个智能温控器的DIY项目里。当时为了给设备做个简单的交互界面&#xff0c;我试过各种方案&#xff0c;最后发现0.96寸的OLED屏配上多级菜单是最经济实惠的选择。这种组合特别适合预算有限但又需要基本人机交…...

3种革命性技术突破:解放城通网盘下载速度的终极方案

3种革命性技术突破&#xff1a;解放城通网盘下载速度的终极方案 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否曾经面对城通网盘那令人绝望的下载速度而束手无策&#xff1f;当急需获取重要文件…...

祝贺电影《得闲谨制》荣获2026亚洲艺术电影节 六项提名

电影《得闲谨制》荣获2026亚洲艺术电影节「金海燕奖」主竞赛单元六项提名&#xff1a; 祝贺导演孔笙 提名最佳导演&#xff1b; 祝贺编剧伍千万里四十八 提名最佳编剧&#xff1b; 祝贺演员肖战 提名最佳男主角&#xff1b; 祝贺演员尹正 提名最佳男配角&#xff1b; 祝贺美术指…...