Vue 组件无故更新（重新渲染）

Question

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

这是一个简单的复制 https://codesandbox.io/s/gracious-cannon-s6jgp?file=/public/index.html 如果任何人都可以阐明这一点。（单击按钮将触发组件中的更新事件）

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

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 相同。对于原始类型（例如 string、int、boolean、float）的常量变量不会发生这种情况，例如 :something="'string'"

Vue component updated (rerendered) without reason