Vue子组件向父组件传递ref对象时去除Proxy包装

因为Vue 3的响应式系统基于Proxy实现，你通过skuForm.value获取的对象依然是被Proxy包裹的响应式对象，所以父组件接收后还是Proxy。可以用以下几种方式转换成普通JSON对象：

方法1：JSON序列化反序列化 #

这是最通用的方法，不管对象结构是否嵌套都能生效，缺点是无法处理函数、Symbol等JSON不支持的类型：

const addSku = () => {
    // 先转成JSON字符串再解析，得到普通对象
    const plainSku = JSON.parse(JSON.stringify(skuForm.value));
    emit('add', plainSku);
}

方法2：使用Vue的toRaw函数 #

Vue官方提供的toRaw方法可以直接获取响应式对象的原始对象，不会破坏原响应式对象：

import { toRaw } from 'vue';

const addSku = () => {
    const plainSku = toRaw(skuForm.value);
    emit('add', plainSku);
}

方法3：对象解构赋值（适合扁平结构） #

如果你的skuForm是扁平结构（没有嵌套对象），可以通过解构生成新的普通对象：

const addSku = () => {
    const plainSku = { ...skuForm.value };
    emit('add', plainSku);
}

注意：如果对象里有嵌套的响应式对象，解构后嵌套部分依然是Proxy，这种情况不适合用这个方法。

内容的提问来源于stack exchange，提问作者Adam