Vue组件实例数据解耦问题：多实例操作相互影响如何解决？

在Laravel/Inertia/Vue技术栈的Side Project中，通过循环使用<component :is="componentName" :id="uniqueId()"></component>实现组件复用，但出现数据耦合问题：修改任意组件实例的样式属性会同步影响所有同类型组件，即使添加了:id和:key也无法解决。项目包含拖拽添加组件、修改组件样式的功能，相关核心代码如下：

核心数据结构示例 #

{"id":"05adb562-e057-4f81-9396-0121b44f2349","list":1,"component_name":"TextInput","style":{"align":"center"}}

拖拽添加组件代码 #

const onDrop = (event, list) => {
    const itemId = event.dataTransfer.getData('itemID');
    const item = items.components.find((item) => item.id === itemId);
    const newItem = {
        id: uuidv4(),
        component: item,
        list: list,
        component_name : item.component_name,
        style: item.style
    };

    items.components.push(newItem);
}

样式修改相关代码 #

const styler = reactive({
    item : null,
    isShown : false,
});

const changeAlign = (st, align) => {
    const curr =  items.components.find((item) => item.id === st.id);
    curr.style.align = align;
}

组件交互代码 #

• 点击唤起样式编辑器：

<component @click="showStyler(item)"></component>

• 样式修改触发事件：

@click='changeAlign(styler.item, "left")'

1. 深拷贝原组件的style对象（核心修复） #

问题根源在于拖拽添加组件时，newItem.style直接引用了原item.style的内存地址，导致所有同类型新组件共享同一个style对象。必须对style进行深拷贝，让每个新组件拥有独立的样式数据：

修改后的onDrop函数：

const onDrop = (event, list) => {
    const itemId = event.dataTransfer.getData('itemID');
    const item = items.components.find((item) => item.id === itemId);
    const newItem = {
        id: uuidv4(),
        component: item,
        list: list,
        component_name : item.component_name,
        // 用JSON序列化/反序列化实现深拷贝（适用于无复杂类型的对象）
        style: JSON.parse(JSON.stringify(item.style))
        // 如果style包含Date、函数等复杂类型，改用lodash的cloneDeep：
        // style: _.cloneDeep(item.style)
    };

    items.components.push(newItem);
}

2. 优化组件渲染的key绑定 #

渲染组件时，建议使用组件数据自身的id作为:key，而非uniqueId()。uniqueId()每次渲染都会生成新值，会导致组件频繁重新渲染，而使用固定的item.id能保证组件复用的稳定性：

<component 
    :is="item.component_name" 
    :key="item.id" 
    :style="item.style"
    :id="item.id"
    @click="showStyler(item)"
></component>

3. 验证修复效果 #

修改完成后，点击任意组件修改样式，检查其他同类型组件的样式是否不再同步变化。也可通过Vue Devtools查看每个组件的props，确认每个实例的style对象都是独立的引用。

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