Vue 将响应式数据转为普通对象

toRaw:将一个 reactive 生成的响应式数据转为普通对象。

toRaw 适用于:获取响应式数据对应的普通对象,对这个普通对象所有的操作,都不会引起页面的更新。

markRaw:标记一个对象,使其永远不会再成为响应式数据。

markRaw 适用于:当数据不会发生变化时,跳过响应式转换可以提高性能。还有一些数据不应该被设置为响应式的,例如复杂的第三方类库等。

将响应式数据转为普通数据 toRaw 函数:

<template><h2>姓名:{{ info.name }}</h2><button @click="info.name += '风'">修改姓名</button><hr /><h2>年龄:{{ obj.age }}</h2><button @click="obj.age++">增加年龄</button>
</template><script>
// 引入 toRaw 函数
import { reactive, toRaw } from 'vue'
export default {name: "Home",setup() {let info = reactive({name: "张三",age: 18})// 将 reactive 数据转为普通数据let obj = toRaw(info);console.log(obj);// 返回数据return { info, obj }}
}
</script>

:toRaw 只能将 reactive 数据转为普通数据,不能转换 ref 数据。

 在响应式数据中添加一个普通对象 markRaw 函数 :

<template><h2>姓名:{{ info.name }}</h2><button @click="info.name += '风'">修改姓名</button><hr /><h2>薪资:{{ info.job.money }}</h2><button @click="info.job.money++">增加薪资</button>
</template><script>
// 引入 markRaw 函数
import { reactive, markRaw } from 'vue'
export default {name: "Home",setup() {let info = reactive({name: "张三",})// 在 info 中添加一个普通对象info.job = markRaw({ money: 20 });console.log(info);// 返回数据return { info }}
}
</script>

:markRaw 只能添加引用数据类型,不能添加基础数据类型。

原创作者:吴小糖

创作时间:2023.11.8 

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

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

相关文章

设置区块链节点输出等级为警告级,并把日志存储阈值位100MB并验证;

题目 获取指定区块链节点输出等级为警告级&#xff0c;并设置日志存储阈值位100MB并验证&#xff1b; 操作步骤 1.切换目录 cd nodes/127.0.0.1/node0 2.打开配置文件并修改 vim config.ini warn&#xff1a;警告

NOIP2023模拟15联测36 均分财产

题目大意 有 n n n个数&#xff0c;你希望能删除其中不超过 k k k个数&#xff0c;然后将剩下的数划分为两个子集&#xff08;可以有重复的数字&#xff09;&#xff0c;满足这两个子集的数的和是相等的。 为了降低出题和做题的难度&#xff0c;可以认为这 n n n个数在 1 1 1…

初识微服务技术栈

认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构&#xff0c;这些架构之间有怎样的差别呢&#xff1f; 导学&#xff1a; 了解微服务的优缺点&#xff1b;了解微服务架构的演变过程&am…

智能井盖传感器功能,万宾科技产品介绍

在国家治理方面&#xff0c;对社会的治理是一个重要的领域&#xff0c;一定要在推进社会治理现代化过程中提高市政府的管理和工作能力&#xff0c;推动社会拥有稳定有序的发展。在管理过程中对全市井盖进行统一化管理&#xff0c;可能是市政府比较头疼的难题&#xff0c;如果想…

Mybatis(一)

1. Mybatis简介 MyBatis下载地址 1.1 MyBatis历史 MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code。随着开发团队转投Google Code旗下&#xff0c;iBatis3.x正式更名为MyBatis。代码于2013年11月迁移到Github…

Flink(三)【运行时架构】

前言 今天学习 Flink 的一些原理性的东西&#xff0c;比较偏概念&#xff0c;但是十分重要。有人觉得上来框框敲代码才能学到东西&#xff0c;那是狗屁不通的道理&#xff08;虽然我以前也这么认为&#xff09;。个人认为&#xff0c;学习 JavaEE那些框架&#xff0c;你上来就敲…

React 中的 Virtual DOM 是什么

在 React 中&#xff0c;Virtual DOM&#xff08;虚拟 DOM&#xff09;是一种用于提高性能和优化渲染的技术。它是 React 的核心概念之一。 Virtual DOM 是一个轻量级的内存数据结构&#xff0c;它是对真实 DOM 的抽象表示。在 React 中&#xff0c;每个组件都有对应的 Virtua…

毅速丨为什么不锈钢材料在金属3D打印中应用广泛

不锈钢材料作为一种常见材料&#xff0c;在金属3D打印中应用广泛&#xff0c;可以说是目前使用率最高的材料&#xff0c;为什么不锈钢大受欢迎&#xff0c;主要由几点原因。 第一、工艺适合性 金属3D打印的工艺&#xff0c;如直接金属激光烧结&#xff08;DMLS&#xff09;或选…

人工智能模型转ONNX 连接摄像头使用ONNX格式的模型进行推理

部署之后模型的运算基本上能快5倍。本地部署之后&#xff0c;联网都不需要&#xff0c;数据和隐私不像在网上那样容易泄露了。 模型部署的通用流程 各大厂商都有自己的推理工具。 训练的归训练&#xff0c;部署的归部署&#xff0c;人工智能也分训练端和部署端&#xff0c;每一…

Docker从入门到上天系列第四篇:docker平台入门图解与平台架构图解

大神推荐:作者有幸结识技术大神孙哥为好友获益匪浅,现在把孙哥作为朋友分享给大家。 孙哥链接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员。 本专栏简介:话不多说,让我们一起干翻Docker 本文章简介:话不多说,让我们讲清楚Docker的平台入门图解和平台…

达梦主备部署

达梦主备部署 一.概括1&#xff09;环境软件下载2&#xff09;集群规划 二.安装1&#xff09;安装前2&#xff09;安装数据库 三.主备机器部署1)初始化数据库&#xff08;1&#xff09;主库配置&#xff08;2&#xff09;备库配置 2)脱机备份&#xff08;1&#xff09;主服务器…

云端生成式 AI – 基于 Amazon EKS 的 Stable Diffusion 图像生成方案

Stable Diffusion 是当下生成式 AI 领域最受欢迎的开源多模态语言-图像模型&#xff0c;由于其易用的接口和良好的使用体验&#xff0c;受到了开源社区和广大设计行业从业者的追捧。Stable Diffusion 模型版本正在快速迭代&#xff0c;并带动了各行各业的生产力变革。目前市场上…

十、K8S之ConfigMap

ConfigMap 一、概念 在K8S中&#xff0c;ConfigMap是一种用于存储配置数据的API对象&#xff0c;一般用于存储Pod中应用所需的一些配置信息&#xff0c;或者环境变量。将配置于 Pod 分开&#xff0c;避免应为修改配置导致还需要重新构建 镜像与容器。 二、创建 可以使用 ku…

java制作游戏,如何使用libgdx,入门级别教学

第一步&#xff0c;进入libgdx的官网。点击get started 进入这个页面&#xff0c;点击setup a project 进入这个页面直接点击&#xff0c;Generate a project. 点击下载&#xff0c;下载创建工具 它会让你下载一个jar包&#xff0c;有java环境的人可以双击直接打开。 把android…

selenium 对当前已经打开的窗口进行调试

要求selenium版本4.11.2 使用cmd进入chrome浏览器的路径执行如下命令&#xff0c;创建一个端口为9522的窗口 chrome.exe --remote-debugging-port9522 --user-data-dir"D:\selenium\AutomationProfile"代码里面创建实例&#xff0c;调用driver即可 from selenium …

C语言面试

数据类型&#xff08;基本内置类型&#xff09; char //字符数据类型 short //短整型 int //整型 long //长整型 long long //更长的整型 float //单精度浮点数 double //双精度浮点数 类型的基本归类 整形家族&#xff1a; …

机器人阻抗与导纳控制的区别

机器人自身的非线性动力学&#xff08;由柔软性引起的&#xff09;导致控制精度下降&#xff0c;因此难以描述准确的动力学。 导纳控制和阻抗控制都是基于位置与力关系的模式&#xff0c;被认为具有鲁棒性和安全性。然而&#xff0c;当机器人与刚体接触时&#xff0c;导纳控制常…

oauth2的知识点

OAuth 2.0是一种授权框架&#xff0c;允许第三方应用程序获取访问资源的权限。它允许用户授权第三方应用程序访问其受保护的资源&#xff0c;而不必共享其凭据&#xff0c;例如用户名和密码。 OAuth 2.0有四种角色&#xff1a; 1. 资源所有者&#xff1a;拥有受保护的资源&am…

HK WEB3 MONTH Polkadot Hong Kong 火热报名中!

HK Web3 Month 11月除了香港金融科技周外&#xff0c;HK Web3 Month又是一大盛事&#xff0c;从10月29日开始开幕直到11月18日结束。此次将齐聚世界各地的Web3产业从业者、开发者、社群成员和学生来参与本次盛会。除外&#xff0c;超过75位产业知名的讲者与超过50场工作坊将为…