Question

我有一个组件会在父数据项更改时无故更新（重新渲染），即使它与相关组件无关。

这是一个简单的复制https://codesandbox.io/s/gracious-cannon-s6jgp?file=/public/index.html，如果有人能对此有所了解。（点击按钮会触发组件中的更新事件）

如果我删除其类被 vue 更改的元素（或删除动态类），它会按预期工作。

Answer 1

因为在每次渲染时您都会为 something 属性定义新对象：

<hello-world :something="[{prop: 'vvv'},{prop: 'rrr'}]"></hello-world>

通过单击该按钮，您可以更新全局数据。根元素被重新渲染。
在渲染过程中，会创建一个包含新对象的新数组，如在组件中的 something 属性中分配的那样。虽然在每次渲染时创建的对象是相同的，但它们是不同的（即它们映射到不同的内存点）
您的组件发现属性 something 更改了其引用，因此会重新呈现。

如果您在数据中创建 items 属性并将该引用作为 prop 传递，则组件不会再次重新渲染：

main.js：

data: {
    active: false,
    items: [{ prop: "vvv" }, { prop: "rrr" }]
  },

index.html：

<hello-world :something="items"></hello-world>

请注意，发生此行为是因为您传递的是 array 8，并且它与 object 相同。它不会发生在原始类型的常量变量（例如字符串、整数、布尔值、浮点数）中，例如 :something="'string'"