vue3 中的 toRaw 和markRaw(原始)

最新推荐文章于 2024-04-01 10:04:59 发布
最新推荐文章于 2024-04-01 10:04:59 发布
阅读量2.1k 收藏 1
点赞数
文章标签： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/120298141
版权

我们当在普通数据转化为响应式数据时,通常会使用ref reactive 进行数据的响应处理

即红色线的转化

 但是有时我们还需要进绿色线的转化

即响应数据转化成普通数据

  使用toRaw进行对响应对象的转化为普通对象

注意:toRaw只能对reactive的响应进行转化为普通数据,

ref 类型无法转化

markRaw 标记过的数据,就不会再变成响应式了

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
vue3-mindmap:开发中
04-09
vue3-mindmap（开发中） 相比更新了技术栈：Vue3、d3v6、Vite 目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v...
移动网页唤起手机内 支付宝 微信支付
weixin_39593730的博客
09-28 3308
本文链接：https://blog.csdn.net/qq_36710522/article/details/90483194 业务场景介绍： H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付 官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝...
Vue3 toRef/toRefs解析与使用
qq_44980680的博客
09-09 2466
Vue3 toRef/toRefs解析与使用
vue3中markRaw详解
最新发布
Br不二
04-01 1110
在 Vue 3 中，`markRaw` 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用 `markRaw` 来标记它
vue3之toRef、toRefs、toRaw
weixin_43845137的博客
03-05 2268
目录vue3之toReftoRef定义原始数据非响应式数据toRef定义原始数据为响应式数据toRefs 可批量创建响应式数据toRaw vue3之toRef toRef是将对象中的某个值转化为响应式数据 toRef(obj,key) toRef定义原始数据非响应式数据 toRef 如果原始对象是非响应式的就不会更新视图 数据是会变的 <template> <div> <button @click="change">change</button
vue3讲代理对象转化为普通对象
qq_75246137的博客
03-13 1467
如果直接打印代理对象的值则会报undefined，所以这里需要我们将代理对象转化为原始对象。打印obj就会发现不是代理对象啦。
【Vue3 易混淆概念点一】ref、toRef、toRefs、reactive 异同点
前端知识分享喵
01-20 1313
一、ref、toRef、toRefs 异同点 ref、toRef、toRefs 函数都可以将某个对象中的属性变成响应式数据 ref 函数的本质是拷贝，修改响应式数据，不会影响到原始数据（引用数据类型会有影响），视图会更新 toRef、toRefs 函数和传入的数据形成引用关系，修改 toRef 会影响这些数据，但是不会更新视图 作用：把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref toRef 函数一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的
Vue3 toRaw 和 markRaw
XunLin233的博客
11-18 457
我们可以使用ref 和 reactive 将普通对象类型的数据变为响应式的数据。我们可以使用toRaw 将reactive 对象的数据变为一般对象类型的数据。使用toRaw 需要先进行引入：语法格式：const xxx = toRaw(数据)注意：toRaw不能用在ref 对象上，如果用在ref 对象上将不起作用。
vueJs中toRaw与markRaw函数的使用比较
itclanCoder
01-19 3391
01toRaw()函数接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用将一个由reactive生成的响应式对象转为普通(原始)对象toRaw()可以返回由reactive(),readonly(),shallowReactive()或shallowReadonly()创建的代理对...
vue3的toRaw和markRaw
weixin_45441173的博客
02-19 806
vue3的toRaw和markRaw
vue3.0中的toRaw和markRaw
m0_52518047的博客
07-23 3384
vue3.0中的toRaw和markRaw
Vue3 中新特性 之间的区别 markRaw toRaw readonly shallowReadonly shallowRef shallowReactive
m0_59795537的博客
02-23 1449
Vue3 新特性
Vue3pdf中文文档
06-06
Vue3pdf中文教程
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
vue3中router和store详细使用教程方法vuex和route.zip
04-24
vue3中router和store详细使用教程方法vuex和route
Vue3 面试题 | 13.精选 Vue3 面试题(ref)
青轩桃李能几何，流光欺人忽蹉跎
12-04 931
在 Vue 中，响应式对象和普通对象是两种不同类型的对象。普通对象是指简单的 JavaScript 对象，它们不具有响应式能力。在 Vue 中，可以使用普通对象来存储数据，但它们不会随着数据的变化自动更新视图。响应式对象是指在 Vue 中使用方法创建的对象。响应式对象具有响应式能力，当它们的属性发生变化时，Vue 会自动更新相应的视图。响应式对象的属性可以是任何类型的值，包括对象、数组和基本类型。响应式对象的优点是可以简化代码，因为它们自动处理数据的变更，无需手动编写代码来更新视图。
vue3里面使用ref和toRef、toRefs
qq_44552416的博客
12-05 1113
vue3 里面我们经常会使用。创建可以使用。这里，对象有一个value属性，其值就是所传递的原始值。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。ref、toRef、toRefs 都可以的本质是拷贝，修改响应式数据，，修改响应式数据，一次仅能，接收两个参数，，它会，然后挨个调用toRef执行。
[vue3学习Day1]创建、setup、ref、toRef、reactive
MOAN.小M.的博客
07-12 649
[vue3学习Day1]创建、setup、ref、toRef、reactive
vue3里面的markRaw和toRaw
06-01
Vue 3 中的 `markRaw` 和 `toRaw` 是用于处理响应式对象的函数。 `markRaw` 函数可以将一个对象标记为“原始值”，使其不再具有响应式特性。这意味着该对象的任何属性发生变化时，都不会触发 Vue 的响应式更新。 `toRaw` 函数则是将一个经过响应式处理的对象还原成普通对象。这可以用于在某些场景下避免出现“深度观察”的问题（即观察到对象内部的属性变化），从而提高性能。 需要注意的是，`markRaw` 和 `toRaw` 都应该谨慎使用，因为它们可能会破坏 Vue 的响应式机制，导致一些意外的问题。通常情况下，我们应该尽量避免使用这两个函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值