时间戳

首页 > 解决方案 > Vue.js。子组件中的变异道具不会触发警告。想知道为什么

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

问题描述

我注意到道具突变（Vue 2.6）有些奇怪。

应避免直接在子组件中更改 props，这会触发以下著名警告

“避免直接改变道具，因为值将被覆盖......”

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

exemple: "Hello World"

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

this.exemple = "Hello World!"

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

exemple : {message : "Hello World"}

在孩子身上我会做类似的事情

this.exemple.message = "Hello World!"

这不会触发任何警告，而且父组件中的数据会更新

我想知道为什么。为什么 prop 突变在一种情况下会传播到父级，而在另一种情况下不会传播到父级？它可能与javascript如何存储这些变量有关吗？使用该技巧是一种好习惯吗？

标签： javascriptvue.jsvuejs2vue-props

解决方案

为什么 prop 突变在一种情况下会传播到父级，而在另一种情况下不会传播到父级？它可能与javascript如何存储这些变量有关吗？

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

警告：

this.prop = {}

无警告：

this.prop.id = 5

使用该技巧是一种好习惯吗？

不，这又违反了一种数据流方式，其中数据通过道具向下传递（到孩子）并通过事件向上传递（到父母）。

好的，但是为什么 Vue 不对这些更改发出警告呢？

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

以下是Vue 团队成员Bolerodan对该主题的评论：

一般来说你不应该那样做。这可能/可能会导致代码中出现意外错误。一般来说，你应该复制你的对象，修改它，然后向上发射到父级（正如你在上一段中提到的，我相信）。这是我采取的方法，也是自上而下、自上而下的普遍共识。

推荐阅读