13.0 vue3 toRawmarkRaw

vue3 readonly&shallowReadonlyhttps://blog.csdn.net/qq_42543244/article/details/122772194本片继续记录vue3的新特性 toRaw & markRaw

简单来说，toRaw：返回 reactive 或 readonly 代理的原始对象，当我们去改变原始对象，页面是不是刷新的，因为数据不是proxy响应式代理的。

markRaw：去标记一个对象，让它永远不会转换为proxy；

示例：

<template><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>爱好：{{ hobby }}</h2><h2>工作薪酬：{{ job.j1.money }} K</h2><h2>身份信息：{{ data.message }}</h2><button @click="name = '李四'">改变姓名</button><button @click="age += 1">改变年龄</button><button @click="hobby[1] = '看比赛'">改变爱好</button><button @click="job.j1.money += 1">改变薪酬</button><button @click="getOriginalData">获取原始数据</button><button @click="addPersonMessage">添加身份信息</button><button @click="changePersonMessage">修改身份信息</button>
</template><script>
import { markRaw, reactive, toRaw, toRefs } from "vue";
/* toRaw:返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象进行的所有操作都不会引起页面的更新markRaw:标记一个对象，使其永远不会转换为 proxy。返回对象本身应用场景：1.有些值不应该去设置成响应式的，比如第三方的类库2.当需要去渲染不可变的大量数据源时，跳过响应式转换可以获得更好的性能*/
export default {name: "Demo",setup() {let data = reactive({name: "张三",age: 18,hobby: ["打篮球", "听音乐", "玩游戏"],job: {j1: {money: 10,},},});function getOriginalData() {let originalData = toRaw(data);originalData.age++; //originalData的age一直在变化，但是页面不会有任何变化console.log(originalData);}// 这里我们想要去添加一个人的身份信息,身份证信息，我们的身份证号肯定是永远不变的吧！function addPersonMessage() {// data.message = { idNumber: "411121199711111234" };// 对一个对象进行markRaw标记，让这个对象永远不会成为proxydata.message = markRaw({ idNumber: "411121199711111234" });}function changePersonMessage() {data.message.idNumber = "41112119971111123X";}return {data,  ...toRefs(data),getOriginalData,addPersonMessage,changePersonMessage,};},
};
</script>

vue3 customRef的使用https://blog.csdn.net/qq_42543244/article/details/122815091

13.0 vue3 toRawmarkRaw相关推荐

【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
Ubuntu 14.04 64位上安装Valgrind 3.13.0 操作步骤
关于Valgrind的介绍和使用可以参考: http://blog.csdn.net/fengbingchun/article/details/50196189 在Ubuntu 14.04上可以通过以 ...
「biáng biáng 面」马上可以打出来了！Unicode发布13.0版本，收录4939个生僻字
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达十三发自凹非寺量子位报道 | 公众号 QbitAI 有一种面条,很多人吃过,但 ...
TensorFlow 1.13.0 正式发布，谷歌开源的机器学习框架
TensorFlow 1.13.0 已正式发布,TensorFlow 是谷歌的第二代机器学习系统,按照谷歌所说,在某些基准测试中,TensorFlow 的表现比第一代的 DistBelief 快了 2 ...
VS2015编译MuPDF 1.13.0源码（详细）
前言要想对PDF进行二次开发,那么MuPDF一定是首选,MuPDF 上的呈现器专为高质量的抗失真图像量身打造,它以像素级的精度高品质呈现文字和文字间的间距,从而获得最高级别的显示保真度,在设备屏幕上 ...
NVIDIA DIGITS-2.0 + Ubuntu 14.04 + CUDA 7.0 + cuDNN 7.0 + Caffe 0.13.0环境配置
引言 DIGITS简介 DIGITS特性资源信息说明 DIGITS安装软硬件环境硬件环境软件环境操作系统安装 DIGITS安装前准备安装CUDA70deb方式安装cuDNN70 安装C ...
官宣｜Apache Flink 1.13.0 正式发布，流处理应用更加简单高效！
简介:Flink 1.13.0 版本让流处理应用的使用像普通应用一样简单和自然,并且让用户可以更好地理解流作业的性能. 翻译 | 高赟 Review | 朱翥.马国维 GitHub 地址 https ...
Geary 0.13.0 发布，GNOME 3 Email 客户端应用
百度智能云云生态狂欢季热门云产品1折起>>> Geary 0.13.0 发布了,Geary 是一个电子邮件应用,用于 GNOME 3 桌面版本,它允许阅读.查找和发送电子,并 ...
Scala-2.13.0 安装及配置
Scala 简介 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. Scala 运行在Java虚拟机上,并兼容现有的Java程序 ...

13.0 vue3 toRawmarkRaw

13.0 vue3 toRawmarkRaw相关推荐

最新文章

热门文章