Vue2向Vue3 Web Component传对象属性变更不触发响应求助

问题场景 #

主项目基于Vue2，引入通过npm发布的、由Vue3构建的Web Components组件。当向该组件传递对象类型Prop后，修改对象内部属性（如向数组push新值）时，组件内的watcher和computed均无法感知到变更，只有重新赋值整个对象才能触发响应；但在Vue3项目中使用该组件时，一切正常。

示例代码 #

Vue2 项目代码 #

<template>
  <div>
    <problem
        :testObject.prop="testObject"
        @testEmit="pushArray"
    />
    {{ testObject }}
  </div>
</template>

<script>
export default {
    data() {
        return {
            testObject: null,
        };
    },
    created() {
        this.testObject = {
            objectArray: [1, 2],
        };
    },
    methods: {
        pushArray() {
            this.testObject.objectArray.push(5);
        },
    },
    watch: {
       testObject: {
           handler(newVal) {
               console.log('View watcher triggered', newVal);
           },
           deep: true,
       },
   },
};
</script>

Vue3 Web Component 代码 #

<template>
    <div>
        Prop Object {{ testObject }}
        <hr>
        Ref Object {{ objectWithArray }}
        <br>
        <button @click="pushArray">
            Push array
        </button>
    </div>
</template>

<script lang="ts">
import {defineComponent, watch, computed} from 'vue'

export default defineComponent({
    props: {
        testObject: {
            type: Object,
            default: () => null,
        }
    },
    emits: ['testEmit'],
    setup(props, ctx) {
        const objectWithArray: any = computed(() => {
            console.log('Computed triggered');
            return props.testObject;
        })

        const pushArray = () => {
            ctx.emit('testEmit');
        }

        watch(
            () => props.testObject,
            (newVal) => {
                console.log('Component watcher triggered', newVal);
            },
            {deep: true}
        )

        return {
            pushArray,
            objectWithArray
        }
    }
})
</script>

原因分析 #

1. 响应式系统底层差异：Vue2 基于 Object.defineProperty 实现响应式，Vue3 则基于 Proxy。当 Vue2 传递对象给 Web Component 时，该对象是 Vue2 用 Object.defineProperty 处理的响应式对象，而 Web Component 内部的 Vue3 响应式系统无法通过 Proxy 捕获到来自 Vue2 响应式对象的深层变更——两者的响应式通知机制不兼容。
2. Web Components 属性传递限制：原生自定义元素的属性传递仅做值传递（复杂对象传递引用），但原生机制不支持监听对象内部的深层变更。Vue3 内部能通过 Proxy 自动追踪，但跨框架时，Vue2 的深层变更通知无法透传给 Web Component 的 Prop 系统。

解决方案 #

方案1：Vue2 端手动触发 Prop 更新 #

修改对象内部属性后，通过重新赋值对象的方式，让 Vue2 触发 Prop 的更新通知，传递新的引用给 Web Component：

pushArray() {
  this.testObject.objectArray.push(5);
  // 手动触发更新，生成新的对象引用
  this.testObject = {...this.testObject};
}

方案2：Web Component 内部转换响应式对象 #

在 Web Component 内部，将传入的 Vue2 响应式对象转换为 Vue3 的响应式对象，确保能追踪深层变更：

<template>
    <div>
        Prop Object {{ internalObject }}
        <hr>
        Ref Object {{ objectWithArray }}
        <br>
        <button @click="pushArray">
            Push array
        </button>
    </div>
</template>

<script lang="ts">
import {defineComponent, watch, computed, reactive} from 'vue'

export default defineComponent({
    props: {
        testObject: {
            type: Object,
            default: () => null,
        }
    },
    emits: ['testEmit'],
    setup(props, ctx) {
        // 将传入的对象转为Vue3响应式对象
        const internalObject = reactive(props.testObject || {});
        
        // 监听外部Prop变化，同步到内部响应式对象
        watch(() => props.testObject, (newVal) => {
            if (newVal) {
                Object.assign(internalObject, newVal);
            }
        }, {deep: true})

        const objectWithArray = computed(() => {
            console.log('Computed triggered');
            return internalObject;
        })

        const pushArray = () => {
            ctx.emit('testEmit');
        }

        watch(
            () => internalObject,
            (newVal) => {
                console.log('Component watcher triggered', newVal);
            },
            {deep: true}
        )

        return {
            pushArray,
            objectWithArray,
            internalObject
        }
    }
})
</script>

方案3：事件驱动状态同步 #

在 Vue2 端修改对象后，主动触发自定义事件通知 Web Component，让组件内部主动读取最新的对象状态。

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