vue3 中的 toRaw 和markRaw(原始)

最新推荐文章于 2025-11-03 13:45:09 发布
原创 最新推荐文章于 2025-11-03 13:45:09 发布 · 3.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3

本文探讨了在Vue中如何使用ref和reactive进行数据响应化处理，以及如何通过toRaw将响应式数据转化为普通对象。重点讲解了在开发过程中这两种数据类型的转换及其应用场景，强调了toRaw只能用于reactive响应式对象的转换，并提到markRaw可以防止数据变得响应式。

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

即红色线的转化

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

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

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

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

ref 类型无法转化

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

vue3 toRaw和markRaw使用原理教程
jieweiwujie的博客
03-19 552
应用场景，mock数据，data获取的table数据列表。不需要改变 也不允许改变。
Vue3的reactive、ref、toRefs、toRef、toRaw 和 markRaw处理响应式数据区别
m0_72030584的博客
01-09 854
本文主要讲解这个ref、reactive、toRef、toRefs用于实现数据的响应式，toRaw用于获取响应式对象的原始数据，而markRaw则用于将一个对象标记为非响应式
Vue3 toRaw 与 markRaw
不可云
02-27 1276
作用：标记数据不可变为代理数据，也就是reactive，readonly， shallowReactive 或者 shallowReadonly 这四个方式不能将markRaw标记的数据转为响应式数据。作用：返回将reactive，readonly， shallowReactive 或者 shallowReadonly 这个四个方法包裹的原始数据。toRaw返回的数据与包裹之前的数据一个地址值数据，也就是两个数据是相等。注意：toRaw不能乱用，因为会使数据失去响应式。
vue3 toRaw
最新发布
qq_42502739的博客
11-03 232
vue3 toRaw 的正确使用
vue3 中 ref和reactive、shallowRef和shallowReactive，toRaw 和 markRaw的区别
为了WLB努力
03-30 950
在 Vue 3 中，`ref`、`reactive`、`shallowRef`、`shallowReactive` 是用于创建响应式数据的方法，而 `toRaw` 和 `markRaw` 则是用于处理响应式数据的辅助函数。让我分别解释它们的区别：
Vue3：toRaw与markRaw
qq_48597462的博客
09-24 738
在Vue 3中，toRaw和markRaw是两个用于处理响应式对象的全局函数。
Vue3 toRaw 和 markRaw
XunLin233的博客
11-18 730
我们可以使用ref 和 reactive 将普通对象类型的数据变为响应式的数据。我们可以使用toRaw 将reactive 对象的数据变为一般对象类型的数据。使用toRaw 需要先进行引入：语法格式：const xxx = toRaw(数据)注意：toRaw不能用在ref 对象上，如果用在ref 对象上将不起作用。
vue3.x 的toRaw 与 markRaw详细解读
ThomasChan123的博客
02-15 861
vue3.x 的toRaw 与 markRaw详细解读
Vue - toRaw 与 markRaw
2302_81312344的博客
02-04 773
toRaw：用于获取一个响应式对象的原始对象，toRaw 返回的对象不再是响应式的，不会触发视图更新。 markRaw：标记一个对象，使其永远不会变成响应式的。
知识笔记（八十五）———Vue 3中toRaw和markRaw的使用
lrx276的博客
01-18 921
toRaw是Vue 3中的一个全局函数，它接受一个reactive或ref对象，并返回该对象的原始不代理版本。但是请注意，尽管proxy是响应性的，但original的修改不会触发代理的更新。toRaw和markRaw是Vue 3中引入的新API，用于更精细地控制对象的代理和响应性。根据您的具体需求，您可以选择是绕过代理对象，提高性能，还是禁用响应性，以便更好地管理您的应用程序状态。当您需要将Vue应用程序与不支持Vue的第三方库或原生浏览器API集成时，toRaw和markRaw非常有用。
toRaw 与 markRaw
qq_40792800的博客
08-24 1396
那么问题就来了，我的 ref() 函数 ，在定义对象类型的响应式数据时，其底层也是通过 reactive() 函数来实现响应式转化的。用于标记某个对象为“原始对象”（非响应式对象），从而确保该对象不会被 Vue 的响应式系统代理。不会自动递归处理这些嵌套的对象，也就是说它只会处理调用它时直接传入的那一层对象，而不会处理更深层次的嵌套对象。只能作用于传入的那个对象本身，并将该对象还原为其未代理的原始对象。：标记某个对象为“原始对象”（非响应式对象），从而确保该对象不会被 Vue 的响应式系统代理。
vueJs中toRaw与markRaw函数的使用比较
itclanCoder
01-19 3602
01toRaw()函数接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用将一个由reactive生成的响应式对象转为普通(原始)对象toRaw()可以返回由reactive(),readonly(),shallowReactive()或shallowReadonly()创建的代理对...
vue3的toRaw和markRaw
weixin_45441173的博客
02-19 1043
vue3的toRaw和markRaw
vue3.0中的toRaw和markRaw
m0_52518047的博客
07-23 3501
vue3.0中的toRaw和markRaw
Vue3 中新特性 之间的区别 markRaw toRaw readonly shallowReadonly shallowRef shallowReactive
m0_59795537的博客
02-23 1720
Vue3 新特性
vue3里面使用ref和toRef、toRefs
qq_44552416的博客
12-05 1894
vue3 里面我们经常会使用。创建可以使用。这里，对象有一个value属性，其值就是所传递的原始值。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。ref、toRef、toRefs 都可以的本质是拷贝，修改响应式数据，，修改响应式数据，一次仅能，接收两个参数，，它会，然后挨个调用toRef执行。
vue3 ts语法定义ref对象
choorn的博客
05-05 3111
1、引入Ref 的 type。2、定义Ref类型的对象。
vue3.0 中 reactive， ref 和 toRefs
weixin_45677987的博客
05-07 2079
1： Reactive 函数接受一个普通对象， 返回该对象的响应式代理。 模板中访问的数据需要在setup中返回。 setup 需要返回值， setup 中返回值才可以在模板中使用。 2： reactive 中传入一个普通对象， 返回一个代理对象 （就是响应式对象）。 如果创建一个对象是响应式， 只需要永reative 包裹以下； 3： ref 函数是一个简单类型的值， 返回一个可以改变的ref 对象。 返回的对象有唯一的属性value 4: 在steup 函数中， 通过re...
vue3.0 新特性
weixin_43878117的博客
04-21 2845
Setup setup函数是Composition API逻辑组织的入口。 <template> <div>{{ title }}</div> </template> <script> export default ( setup() { const title = 'vue' return { title } } ) </script> Reactive reactive 相当于 Vue 2
vue3里面的markRaw和toRaw
06-01
Vue 3 中的 `markRaw` 和 `toRaw` 是用于处理响应式对象的函数。 `markRaw` 函数可以将一个对象标记为“原始值”，使其不再具有响应式特性。这意味着该对象的任何属性发生变化时，都不会触发 Vue 的响应式更新。 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值