Vue3:优化-从响应式数据中获取纯数据

一、情景说明

我们知道,Vue3中,创建变量时,常用ref、reactive来包裹,这样,这个变量就是响应式数据
然而,有时候,我们只需要纯数据
例如,我们在调用后端接口的时候,我们只要传递JSON结构的纯数据,不需要具备响应式
从而,提升性能。

这个时候,就需要用到toRaw、markRaw技术

二、案例

1、toRaw

从响应式对象中,取出纯JSON数据

import { reactive,toRaw,markRaw,isReactive } from "vue";/* toRaw */
// 响应式对象
let person = reactive({name:'tony',age:18})
// 原始对象
let rawPerson = toRaw(person)

2、markRaw

标记一个对象,使其永远不会变成响应式的。

/* markRaw */
let citys = markRaw([{id:'asdda01',name:'北京'},{id:'asdda02',name:'上海'},{id:'asdda03',name:'天津'},{id:'asdda04',name:'重庆'}
])
// 根据原始对象citys去创建响应式对象citys2 —— 创建失败,因为citys被markRaw标记了
let citys2 = reactive(citys)

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

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

相关文章

Win10 下 git error unable to create file Invalid argument 踩坑实录

原始解决方案参看:https://stackoverflow.com/questions/26097568/git-pull-error-unable-to-create-file-invalid-argument 本问题解决于 2024-02-18,使用 git 版本 2.28.0.windows.1 解决方案 看 Git 抛出的出错的具体信息,比如如下都来自…

GPU的了解

3D动画揭秘显卡的GPU是如何工作的_哔哩哔哩_bilibili 位于显卡中。 与CPU区别: 100名小学生和1位数学博士 做100道非常简单的算术题,小朋友一个人一道题,比博士快。 做1道非常复杂的数学问题,只有博士可以做出来。 CPU主要用于快…

DeepFM。FM(Factorization Machine,因子分解机)。大规模稀疏矩阵。协同过滤方法。

目录 DeepFM。 FM(Factorization Machine,因子分解机)。 大规模稀疏矩阵中的特征组合问题。

c51 单片机如何控制小灯闪烁?

目录 硬件电路设计 软件编程 烧录程序 测试 调整和优化 C51单片机是一种经典的8位微控制器,广泛应用于各种嵌入式系统和智能控制项目中。 C51单片机控制小灯闪烁主要涉及到硬件电路设计和软件编程两个方面。下面是一个基本的步骤说明: 硬件电路设计…

零基础10 天入门 Web3之第2天

10 天入门 Web3之第2天Web3 是互联网的下一代,它将使人们拥有自己的数据并控制自己的在线体验。Web3 基于区块链技术,该技术为安全、透明和可信的交易提供支持。我准备做一个 10 天的学习计划,可帮助大家入门 Web3: 一、这是第二…

铸铁平台合理布局的重要性

铸铁平台合理布局的重要性是为了确保工作环境的安全和效率。以下是一些重要的原因: 安全性:合理布局可以最大限度地减少工作场所的事故和伤害。通过将设备和材料放置在正确的位置,可以降低工作人员被危险物体击中或跌倒的风险。此外&#xff…

【瑞萨RA6M3】1. 基于 vscode 搭建开发环境

基于 vscode 搭建开发环境 1. 准备2. 安装2.1. 安装瑞萨软件包2.2. 安装编译器2.3. 安装 cmake2.4. 安装 openocd2.5. 安装 ninja2.6. 安装 make 3. 生成初始代码4. 修改 cmake 脚本5. 调试准备6. 仿真 1. 准备 需要瑞萨仓库中的两个软件: MDK_Device_Packs.zipse…

Android 代码自定义drawble文件实现View圆角背景

简介 相信大多数Android开发都会遇到一个场景,给TextView或Button添加背景颜色,修改圆角,描边等需求。一看到这样的实现效果,自然就是创建drawble文件,设置相关属性shap,color,radius等。然后将…

基于单片机电流变送器系统仿真设计

**单片机设计介绍,基于单片机电流变送器系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机电流变送器系统的仿真设计,主要目标是利用仿真技术,模拟单片机与电流变送器之间…

二分答案 蓝桥杯 2022 省A 青蛙过河

有些地方需要解释: 1.从学校到家和从家到学校,跳跃都是一样的,直接看作2*x次过河就可以。 2.对于一个跳跃能力 y,青蛙能跳过河 2x 次,当且仅当对于每个长度为 y 的区间,这个区间内 h 的和都大于等于…

hololens 2 投屏 报错

使用Microsoft HoloLens投屏时,ip地址填对了,但是仍然报错,说hololens 2没有打开, 首先检查 开发人员选项 都打开,设备门户也打开 然后检查系统–体验共享,把共享都打开就可以了

计算机网络—HTTP协议:深入解析与应用实践

​ 🎬慕斯主页:修仙—别有洞天 ♈️今日夜电波:ヒステリックナイトガール 1:03━━━━━━️💟──────── 5:06 🔄 ◀️ ⏸ ▶️ ☰…

java算法day45 | 动态规划part07 ● 70. 爬楼梯 (进阶) ● 322. 零钱兑换 ● 279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 题目描述&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整数。 输入描述&#xff1a;输入…

java对象是怎么在jvm中new出来的

java对象是怎么在jvm中new出来的 查看java对象字段属性在内存中的值 java 对象 创建 流程 附上java源码 public class MiDept {private int innerFiled999;public MiDept() {System.out.println("new MiDept--------------");}public String show(int data) {Sy…

[Win10] VMware Workstation Pro 17.5.1 Build 23298084 Win64安装教程

VMware Workstation Pro 17.5.1 Build 23298084 Win64安装教程 下载 https://download.csdn.net/download/u012621175/89088925 安装 激活 备注 如果激活不成功可以私信获取私钥

android APP monkey 测试

monkey 测试 一、电脑ADB安装及使用详解1、什么是 Monkey 测试2、什么是ADB3、ADB的作用4、安装前提条件5、ADB下载6、ADB安装与配置 二、连接安卓手机检查是否连接上安卓手机windows端安装ADB驱动 三、 monkey测试操作指令演示指令APP包名查看方式测试效果 一、电脑ADB安装及使…

画图理解JVM相关内容

文章目录 1. JVM视角下&#xff0c;内存划分2. 类内存分布硬核详解1. 获取堆内存参数2. 扫描堆内存&#xff0c;定位实例3. 查看实例所在地址的数据4. 找到实例所指向的类信息的地址5. 查看class信息6. 结论 3. Java的对象创建流程4. 垃圾判别算法4.1 引用计数法4.2 可达性分析…

ubuntu16如何使用高版本cmake

1.引言 最近在尝试ubuntu16.04下编译开源项目vsome&#xff0c;发现使用apt命令默认安装cmake的的版本太低。如下 最终得知&#xff0c;ubuntu16默认安装确实只能到3.5.1。解决办法只能是源码安装更高版本。 2.源码下载3.20 //定位到opt目录 cd /opt 下载 wget https://cmak…

Spring Boot 接入 Redis

Spring Boot 接入 Redis 简介 Redis 是一种访问速度非常快的内存数据结构存储&#xff0c;用作数据库、缓存、消息代理和流引擎。提供 strings、hashes、lists、sets 等数据结构。可以解决会话缓存、消息队列、分布式锁、定期将数据集存储到硬盘等功能。 通过 Redis 设计实现…

具身智能机器人实现新里程碑!新型3D世界模型问世

随着人工智能技术的不断进步&#xff0c;视觉-语言-动作&#xff08;VLA&#xff09;模型在机器人控制、自动驾驶、智能助手等领域展现出了广阔的应用前景。这类模型能够将视觉、语言、动作等多模态信息进行融合&#xff0c;实现从感知到决策的端到端学习。然而&#xff0c;现有…