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;咱们平常在网上看到的那些漂亮…

vue-模板引用

官网原文&#xff1a; 虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作&#xff0c;但在某些情况下&#xff0c;我们仍然需要直接访问底层 DOM 元素。要实现这一点&#xff0c;我们可以使用特殊的 ref attribute&#xff1a; <input ref"input">…

网络基础知识--网络硬件设备介绍(含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…

MyBatis(40)使用 MyBatis 时,事务管理的常见问题有哪些,如何解决

在使用MyBatis进行事务管理时&#xff0c;开发者可能会遇到多种问题&#xff0c;这些问题通常涉及事务的边界定义、事务的传播行为、以及事务的一致性等方面。下面&#xff0c;我们将深入探讨这些常见问题及其解决方案&#xff0c;并结合源码和代码示例进行详细解析。 1. 事务…

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

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

从零开始学习嵌入式----C语言指针数组

C语言指针数组&#xff0c;彻底搞懂它&#xff01; 指针在 C 语言中是一个强大的工具&#xff0c;而指针数组更是锦上添花&#xff0c;它为我们处理大量数据&#xff0c;特别是字符串&#xff0c;提供了极大的便利。但是&#xff0c;指针数组的概念也常常令初学者感到困惑。本文…

matlab入门学习

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

图数据库 - Neo4j简介

深入理解 Neo4j 与 Cypher 语法 什么是 Neo4j Neo4j 是一个基于图的数据库管理系统&#xff0c;它使用图形理论来表示数据关系。这种数据库与传统的关系型数据库不同&#xff0c;它更适合处理高度互联的数据结构。 基本概念 图&#xff1a;在 Neo4j 中&#xff0c;数据以图的…

WEB07Vue+Ajax

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

flask-login会话保持实现

目录 1、实现原理 1. 用户登录过程 2. 判断用户是否登录的原理 3. 注销过程 2、示例使用 1、实现原理 1. 用户登录过程 当用户通过表单提交用户名和密码进行登录时&#xff0c;后端会进行身份验证。如果验证通过&#xff0c;Flask-Login 会执行以下操作&#xff1a; …

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

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

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

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

SQL注入安全漏洞与防御策略

1.引言 SQL注入&#xff08;SQL Injection&#xff09;是一种广泛存在的网络安全攻击手段&#xff0c;它允许攻击者通过向应用程序的数据库查询中插入或“注入”恶意的SQL代码片段&#xff0c;从而操控后端数据库&#xff0c;执行未授权的数据库操作&#xff0c;如数据泄露、数…

C++入门基础知识2

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

ES6 Module 的语法(十二)

ES6&#xff08;ECMAScript 2015&#xff09;引入了模块&#xff08;Modules&#xff09;的概念&#xff0c;使得JavaScript代码可以更容易地组织和复用。 1. export 关键字 命名导出 (Named Exports) 你可以使用 export 关键字导出多个变量、函数或类。 // module.js export…