Vue3 markRaw的使用

markRaw
作用:将一个对象标记为不可以被转化为代理对象。返回该对象本身。
应用场景:
1.有些值不应被设置成响应式时,例如复杂的第三方类库等
2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。
markRaw 的使用场景
很多时候,我们会遇见这样的场景。
有一个响应式对象person。
这个响应式对象有很多的属性。
但是呢?个别属性是不需要响应式的。比如爱好
markRaw的使用
<template><div><p> 姓名: {{person.name}}</p> <p> 性别: {{person.sex}}</p> <p> 爱好: {{person.likes}}</p> <el-button @click="change">按钮</el-button></div>
</template><script lang="ts" setup>
import { reactive,markRaw } from 'vue'
let person:any = reactive({name: "杨光",sex:'男',
});var likes = ['吃饭','睡觉'];
// 往响应式对象中新增一个likes属性,该属性是响应式
// 但是我们使用markRaw包裹后这个likes属性值是不具有响应式的person.likes = markRaw(likes);
// 因此试图是不会更新的
var change = () => {person.likes[0]= '我要吃饭';person.likes[1]= '我要睡觉';console.log(person.likes);
};
</script>

看了上面的例子你知道了什么?
看了上面这个例子。
有的小伙伴会说,只要用markRaw包裹的对象。
结论:那么这个对象就不是响应式对象。则试图就不会发生更改。
验证
<template><div><p> 姓名: {{person.name}}</p> <p> 性别: {{person.sex}}</p> <p> 爱好: {{person.likes}}</p> <el-button @click="canChange">按钮</el-button><!-- <el-button @click="onchange">按钮</el-button> --></div>
</template><script lang="ts" setup>
import { reactive,markRaw } from 'vue'
let person:any = reactive({name: "杨光",sex:'男',likes:['吃饭','睡觉']
});let likes = ['吃饭','睡觉'];
person.likes = markRaw(likes);
let canChange = () => {person.name='发生改变了'person.likes[0]= '我要吃饭';person.likes[1]= '我要睡觉';console.log(person.likes);
};
</script>

是不是让你很失望,怎么会这样
我们刚刚说了一个结论:
只要用markRaw包裹的对象。那么这个对象就不是响应式对象。则试图就不会发生更改。
这一句话,只说对了一半。
如果你只直接更改被markRaw包裹的对象。试图是不会发生改变的。
但是如果你下先更改没有被markRaw包裹的属性,
然后在更改被markRaw包裹的对象,这个时候试图就会发生改

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

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

相关文章

Chromium实用技巧篇-如何下载指定版本的Chromium(一)

1. 引言 随着互联网技术的不断发展&#xff0c;网络浏览器已经成为我们日常生活中不可或缺的一部分。作为一款开源浏览器项目&#xff0c;Chromium不仅为Google Chrome提供了坚实的基础&#xff0c;也为其他许多浏览器提供了技术支持。如果您希望体验最前沿的浏览器功能或参与开…

一个很变态但是有用的变现手段:用AI技术搞电商模特图,接单接到手软~

前言 今天带大家拆解一个特别有趣的项目&#xff0c;必须得跟大家分享一下&#xff1a;用AI技术搞电商模特图。 是不是感觉挺科幻的&#xff1f;但这真不是科幻小说里的情节&#xff0c;而是咱们现实生活中已经实现的事情。 想想看&#xff0c;咱们平常在网上看到的那些漂亮…

网络基础知识--网络硬件设备介绍(含eNSP模拟器命令使用)

华为 eNSP 模拟器安装教程可参考&#xff1a;华为 eNSP 模拟器安装教程&#xff08;内含下载地址&#xff09;_ensp下载-CSDN博客 华为eNSP&#xff08;Enterprise Network Simulation Platform&#xff09;模拟器是一款由华为提供的免费网络仿真平台&#xff0c;主要用于模拟和…

虚拟机vmware网络设置

一、网络分类 打开vmware workstation网络编辑器可以知道有三种网络类型&#xff0c;分别是&#xff1a;桥接模式、nat模式、仅主机模式。 1、桥接模式 桥接模式是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信。在桥接的作用下, 类似于把物理主机虚拟为一个交换机, 所有设…

【Wamp】局域网设备访问WampServer | 使用域名访问Wamp | Wamp配置HTTPS

局域网设备访问WampServer 参考&#xff1a;https://www.jianshu.com/p/d431a845e5cb 修改Apache的httpd.conf文件 D:\Academic\Wamp\program\bin\apache\apache2.4.54.2\conf\httpd.conf 搜索 Require local 和Require all denied&#xff0c;改为Require all granted <…

分布式系统中雪花ID的使用及前后台精度解决

本文介绍了雪花ID的应用场景&#xff0c;以及针对雪花id生成精度过大导致数据缺失的解决方案。 一、概念 雪花 ID是一种分布式 ID 生成策略&#xff0c;保证全局唯一&#xff0c;位数组成中含有时间戳&#xff0c;相比UUID,故也能保证自增。 二、应用场景 分库、分表、分片、…

【windows OBS开启直播】Windows搭建RTMP视频流服务(Nginx服务器版)

如果您想在windows 电脑上设置RTMP服务器&#xff0c;并使用VLC播放器播放OBS的直播流&#xff0c;您可以使用一个本地的RTMP服务器软件&#xff0c;如nginx配合nginx-rtmp-module来搭建。下面 详细介绍下如何搭建此视频流服务。 1、安装和配置本地RTMP服务器 步骤1&#xff…

ST Smart Things Sentinel:一款针对复杂IoT协议的威胁检测工具

关于ST Smart Things Sentinel ST Smart Things Sentinel&#xff0c;简称ST&#xff0c;是一款功能强大的安全工具&#xff0c;广大研究人员可以使用该工具检测物联网 (IoT) 设备使用的复杂协议中的安全威胁。 在不断发展的联网设备领域&#xff0c;ST Smart Things Sentinel…

matlab入门学习

一、什么是matlab MATLAB&#xff08;matrix laboratory矩阵实验室&#xff09;是一款商用数学软件&#xff0c;主要面对科学计算、可视化以及交互式程序设计的高科技计算环境。可用于数据分析、深度学习、图像处理与计算机视觉、量化金融与风险管理等领域。 二、matlab和pyt…

WEB07Vue+Ajax

1. Vue概述 Vue&#xff08;读音 /vjuː/, 类似于 view&#xff09;&#xff0c;是一款用于构建用户界面的渐进式的JavaScript框架&#xff08;官方网站&#xff1a;https://cn.vuejs.org&#xff09;。 在上面的这句话中呢&#xff0c;出现了三个词&#xff0c;分别是&#x…

宝兰德参编金融智能体标准,深耕大模型场景化落地

随着数智化浪潮的不断推进&#xff0c;人工智能技术正深刻影响着金融服务的模式和流程&#xff0c;金融智能体在大模型的加持下&#xff0c;业务场景的应用能力得到强化。然而&#xff0c;作为新型技术&#xff0c;金融智能体在隐私保护、透明性、数据泄露等方面仍存在诸多风险…

枸杞糖基转移酶--文献精读31

Functional and structural dissection of glycosyltransferases underlying the glycodiversity of wolfberry-derived bioactive ingredients lycibarbarspermidines 功能和结构分析导致枸杞来源的生物活性成分&#xff08;如lycibarbarspermidines类化合物&#xff09;糖基…

C++入门基础知识2

1.引用 1.1引用的使用 1.引用在实践中主要是引用传参和引用做返回值中减少拷贝提高效率和改变引用对象时同时改变被引用对象 2.引用传参跟指针传参功能是类似的&#xff0c;引用传参相对更方便一些 3.引用和指针在实践中相辅相成&#xff0c;功能有重叠性&#xff0c;各有特…

嵌入式C++、Qt/QML和MQTT:智能工厂设备监控系统的全流程介绍(附代码示例)

1. 项目概述 本项目旨在开发一套先进的智能工厂设备监控系统&#xff0c;集成嵌入式技术、工业通信协议和人机界面等多项技术&#xff0c;实现对工厂设备的全方位实时监控、高精度数据采集和智能化分析。该系统将显著提升工厂设备的运行效率&#xff0c;大幅降低维护成本&…

基于AT89C51单片机的16×16点阵LED显示器字符滚动显示设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的1616点阵LED显示器字符滚动显示设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 仿真效果图 仿真图 代码 系统论文 资源下载 设计的内容和要求 熟悉51系…

Python练习题(3)

1.使用requests模块获取这个json文件http://java-api.super-yx.com/html/hello.json 2.将获取到的json转为dict 3.将dict保存为hello.json文件 4.用文件流写一个copy(src,dst)函数,复制hello.json到C:\hello.json import requests import jsondef copy(src, dst):read_file o…

【typedb】例子:药物发现 1: 模式导入

typedb-examples/drug-discovery/ Drug discovery监听0.0.0.0:1729 但这么连接肯定不行: localhost:1729 可以: 一直无法点击schema图标:先创建一个数据库 选中数据库: 选中后就可以了:

我的第128天创作纪念日

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;初阶数据结构笔记专栏&#xff1a; 初阶数据结构笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章…

演示:【Avalonia-Controls】Avalonia皮肤,主题,自定义控件,数据库,系统模块资源库

一、目的&#xff1a;分享一个Avalonia皮肤&#xff0c;主题&#xff0c;自定义控件&#xff0c;数据库&#xff0c;系统模块资源库 开源地址&#xff1a; GitHub - HeBianGu/Avalonia-Controls: Avalonia控件库 Nuget包地址&#xff1a; NuGet Gallery | Packages matchin…

02MFC画笔/画刷/画椭圆/圆/(延时)文字

文章目录 画实心矩形自定义画布设计及使用连续画线及自定义定义变量扇形画椭圆/圆输出颜色文本定时器与定时事件 画实心矩形 自定义画布设计及使用 连续画线及自定义定义变量 扇形 画椭圆/圆 输出颜色文本 定时器与定时事件