Object.assign中断v-for（功能组件）

Question

我正在创建Vue组件（“ Polar”）以将div布置为圆形图案。这样做是为了设置内联样式。

现在，当我使用组件时出现一个奇怪的问题。它只会在非常特殊的情况下发生：

• 我通过v-for创建了多个实例
• Polar组件是“功能”组件
• 我将道具作为引用对象传递（内联效果很好！）
• propsObject包含一个嵌套的StylesObject
• 自定义样式对象被合并为ObjectAssign()的第一个参数

会发生什么？ v-for中的所有实例都采用最后一项的值，就像闭合被破坏一样。

这里要显示的代码很多，所以我有一个codesandbox和github。第一次测试显示了问题：所有项目都显示在彼此的顶部。第二个测试表明，我可以仅通过内联传递完全相同的propsObject，并且可以正常工作。反转Object.assign中的参数也可以使其正常工作，就像将组件转换为正常/非功能组件一样。

我怀疑这是某种Vue错误（或至少是未记录的行为）。

Answer 1

快速解答：

Object.assign将更改第一个参数（=目标对象）。这导致我的settingsObj每次都执行其他设置，直到具有最后一个实例的设置为止。

通过更改即可轻松解决

Object.assign(props.settingsObj, {setting: val, })

进入

Object.assign({}, props.settingsObj, {setting: val, })

对不起，指责Vue，是我的全部错。不能完全确定为什么只有功能组件会发生这种情况，但必须将正常组件隔离在自己的Vue实例中。