javascript - Vue.js。子组件中的变异 Prop 不会触发警告。想知道为什么

Question

我注意到 Prop 突变(Vue 2.6)有些奇怪。
应避免直接在子组件中更改 props，这会触发以下著名警告

"Avoid mutating a prop directly since the value will beoverwritten...."

所以如果在我的父组件中我有一个像

exemple: "Hello World"

我作为 Prop 传递给子组件。如果在那个子组件中我做类似的事情

this.exemple = "Hello World!"

我收到警告。很公平。现在我注意到如果父级中的数据是一个像

exemple : {message : "Hello World"}

在 child 身上我会做类似的事情

this.exemple.message = "Hello World!"

这不会触发任何警告，而且父组件中的数据会更新
我想知道为什么。为什么 prop 突变在一种情况下会传播到父级，而在另一种情况下不会传播到父级？它可能与javascript如何存储这些变量有关吗？使用该技巧是一种好习惯吗？

Answer 1

Why does the prop mutation propagate to the parent in one case but not in the other ? Does it have maybe something to do with how javascript stores these variable ?

是的。 JavaScript 引用变量(例如对象和数组)在您改变它们的属性/值时不会改变它们的引用。这意味着父级也可以访问更改的属性，因为它也可以访问引用。并且 Vue 只有在引用发生变化时才会给出 prop 突变警告。
警告:

this.prop = {}

无警告:

this.prop.id = 5

Is it good practice to use that trick ?

不，又违反了 One way data flow其中数据通过 Prop 向下传递(到 child )并通过事件向上传递(到 parent )。

好的，但是为什么 Vue 不对这些更改发出警告呢？
考虑一个有 1000 个属性的对象或一个有 1000 个项目的数组。 Vue 必须深入检查所有 1000 个更改，并且没有快速的方法可以做到这一点，因为每个项目都必须单独与旧值进行比较。这会对性能产生影响，并可能使许多应用程序无法使用。

这是 comment关于 Vue 团队成员 Bolerodan 的主题:

Generally you shouldnt do that. This can / could cause unexpected bugs in your code. Generally you should make a copy of your object, modify that, then emit upwards to the parent (as you have mentioned in your last paragraph I believe). This is the method I take and is the general consensus of top down, emit up approach.