vue3.2.12版本defineExpose返回的数组会被深度reactive化（数组内部的对象会变成proxy）

子组件

import {ref} from 'vue'
const a=ref([{b:1,c:{d:2}}])
defineExpose({a})

父组件

import { ref } from "vue"
import A from "./a.vue"
const aref = ref()
const see = () => {
  console.log("aref: ", aref.value.a)
    console.log("aref: ", aref.value.a[0])
}

这样格式无法传参给后端，请问大家，有没有方法讲深度reactive化的对象或者数组转化为普通的对象？

Steiner_

2 声望

暂无个人描述~

0 人点赞

Summer

站长 11.3k 声望 / 维护者 @ LearnKu.com

最佳答案

Proxy 对象是 Vue 为了 reactive 化而包上去的，console log 会出现 Proxy，但不影响使用。

如果你的变量是数组，当成数组使即可，忽略 console log 的内容。

以下是测试代码。

子组件 ChildComponent.vue：

<script setup>
import {ref, defineExpose} from 'vue'
const a=ref([{b:1,c:{d:2}}])

// Only available in Vue >= 3.1.3
defineExpose({
    a
})
</script>

父：

<template>
    <ChildComponent ref="childComponentRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childComponentRef = ref()

onMounted(() => {
    const valueA = childComponentRef.value.a;
    console.log(valueA)
    console.log(valueA[0].b)
    console.log(JSON.stringify(valueA))
})
</script>

file

3年前评论

讨论数量: 2

Summer

站长 11.3k 声望 / 维护者 @ LearnKu.com

Proxy 对象是 Vue 为了 reactive 化而包上去的，console log 会出现 Proxy，但不影响使用。

如果你的变量是数组，当成数组使即可，忽略 console log 的内容。

以下是测试代码。

子组件 ChildComponent.vue：

<script setup>
import {ref, defineExpose} from 'vue'
const a=ref([{b:1,c:{d:2}}])

// Only available in Vue >= 3.1.3
defineExpose({
    a
})
</script>

父：

<template>
    <ChildComponent ref="childComponentRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childComponentRef = ref()

onMounted(() => {
    const valueA = childComponentRef.value.a;
    console.log(valueA)
    console.log(valueA[0].b)
    console.log(JSON.stringify(valueA))
})
</script>

file

3年前评论

回思恋莹

课程读者 25 声望

import {toRaw} from 'vue';

3年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

vue3.2.12版本defineExpose返回的数组会被深度reactive化（数组内部的对象会变成proxy）

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

vue3.2.12版本defineExpose返回的数组会被深度reactive化（数组内部的对象会变成proxy）

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录