Vue3组件中无法访问Proxy类型Props的目标数据求助

问题现象 #

开发Vue3项目时，组件接收的slideResults props被Vue包装为Proxy对象，出现以下异常：

• 执行console.log(this.slideResults)，控制台展开后能看到Target中包含canvasResults和possibleDuplicatedImages属性及对应数据
• 但直接读取slideResults.canvasResults，或通过JSON.parse(JSON.stringify(this.slideResults))后读取属性，结果均为undefined

组件代码示例 #

写法1（Options API） #

export default defineComponent({
    props: {
        takenImage: HTMLImageElement,
        slideResults: Object, // slideResults = {canvasResults, possibleDuplicatedImages}
    },
    components: { Swiper, Slide, SwiperSlide },
    computed: {
        getImages() {
            console.log(this.slideResults);

            const slideResults = JSON.parse(JSON.stringify(this.slideResults));

            console.log(slideResults);
            console.log(slideResults.canvasResults); // 输出undefined
            console.log(slideResults.possibleDuplicatedImages); // 输出undefined

            const images = [];
            return images;
        },
    },
});

写法2（Composition API） #

export default defineComponent({
    props: {
        takenImage: HTMLImageElement,
        slideResults: Object, // slideResults = {canvasResults, possibleDuplicatedImages}
    },
    components: { Swiper, Slide, SwiperSlide },
    setup(props) {
        const getImages = () => {
            const { slideResults } = toRefs(props);
            const { canvasResults, possibleDuplicatedImages } = toRaw(
                slideResults.value
            );

            console.log(canvasResults); // 输出undefined
            console.log(possibleDuplicatedImages); // 输出undefined

            const images = [];
            for (let i = 0; i < canvasResults?.length; i++) {
                images.push({
                    image: possibleDuplicatedImages[i],
                    opencvResult: canvasResults[i],
                });
            }
            console.log(images);
            return images;
        };

        return {
            modules: [Autoplay, Keyboard, Pagination, Zoom, Navigation],
            getImages,
        };
    },
});

解决方法 #

1. 确保数据加载时机正确 #

控制台展开Proxy能看到数据，是因为控制台采用惰性求值，实际执行console.log时，slideResults的属性可能还未被异步赋值（比如接口请求、Canvas绘制未完成）。此时需监听数据变化，在数据就绪后再处理：

// Composition API示例
import { watch, ref } from 'vue';

export default defineComponent({
    props: {
        slideResults: Object,
    },
    setup(props) {
        const images = ref([]);

        // 监听slideResults的变化，深度监听确保捕获属性更新
        watch(() => props.slideResults, (newResults) => {
            // 先判断属性是否存在
            if (!newResults?.canvasResults || !newResults?.possibleDuplicatedImages) return;

            // 处理数据生成images
            images.value = newResults.canvasResults.map((canvas, idx) => ({
                image: newResults.possibleDuplicatedImages[idx],
                opencvResult: canvas
            }));
        }, { deep: true, immediate: true }); // immediate确保初始化时执行一次

        return { images };
    },
});

2. 父组件确保传递响应式对象 #

如果父组件中slideResults是普通对象，后续动态添加属性时Vue无法追踪，导致Proxy无法正确识别属性。父组件需用reactive创建响应式对象：

// 父组件代码
import { reactive } from 'vue';

// 初始化响应式对象
const slideResults = reactive({
    canvasResults: [],
    possibleDuplicatedImages: []
});

// 异步获取数据后赋值（比如接口返回、Canvas绘制完成）
const fetchData = async () => {
    const canvasData = await 获取Canvas数据();
    const imageData = await 获取图片数据();
    slideResults.canvasResults = canvasData;
    slideResults.possibleDuplicatedImages = imageData;
};

3. 正确使用toRaw #

toRaw用于获取Proxy的原始对象，但需确保原始对象的属性已被赋值。配合watch使用能避免时机问题：

watch(() => props.slideResults, (newVal) => {
    const rawResults = toRaw(newVal);
    if (rawResults.canvasResults) {
        // 基于原始对象处理逻辑
        console.log(rawResults.canvasResults);
    }
});

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