获取数据Proxy下的Target的数据

Vue3.0：解决Proxy包装数据获取问题的技巧

原创已于 2023-12-28 09:50:42 修改 · 1.3w 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-07-29 21:37:55 首次发布

16 篇文章

订阅专栏

本文介绍了如何在Vue 3.0中通过`toRaw`方法和JSON序列化处理被Proxy包裹的数据，以便于访问和打印原始值。两种方法对比和适用场景详解。

在这里插入图片描述

1、使用toRaw

Vue3.0给我们提供的新方法，toRaw方法是把被reactive或readonly后的Proxy对象转换为原来的target对象

使用方法：

import { toRaw } from 'vue'

const Data = toRaw(record);
console.log(Data, 'data----');

打印结果为

在这里插入图片描述
2、通过json序列化之后可获取值

const Data = JSON.parse(JSON.stringify(record));
console.log(Data, 'data----');

打印结果为
在这里插入图片描述

4 条评论

进击的potato 2023.12.15
toRaw怎么引入呢，我import { toRaw } from '@vue/reactivity'报错了，找不到
- 麻辣翅尖回复进击的potato 2023.12.28
  很抱歉现在次啊看到您的评论 import { toRaw } from 'vue'. 这样引入就行

hmbbpdx 2023.09.23
toRaw(record)无法赋给Data 啊[face]emoji:002.png[/face]
- 麻辣翅尖回复hmbbpdx 2023.09.27
  无法赋值是什么意思？是代码直接爆红吗，我这写的确实不够清晰，我的场景是table组件的record，我今天尝试复现，您如果也是同样的场景的话需要确保record是当前行数据， [code=plain] <el-table-column label="操作">  <template v-slot="scope">  <el-button @click="handleClick(scope)">获取数据</el-button> </template> </el-table-column> const handleClick = (scope) => { console.log(scope, scope.row, '表格数据') // const tableList = toRaw(scope) // 错误 const tableList = toRaw(scope.row) console.log(tableList, '数据') } [/code] 我看您博客中是toRaw(obj.list)遍历后再赋值，是否可以尝试this.list2 = toRaw(obj.list) 呢