javascript - 在vue组件中使用this.$root有什么缺点？

Question

在vue的官方文档中我在edge cases处找到了关于$root的用法部分。 “Edge Cases”让我觉得使用 this.$root(或 this.$parent)来改变子组件中根实例的数据不是正常的或推荐方式。

我知道 vuex 是大型复杂 vue 应用程序的最佳状态管理选项，它具有更高级的功能和更好的调试能力。但这并不能让我相信 this.$root 不好。

正如文档所说，当 this.$root 改变根数据时，无法跟踪数据更改发生的时间和地点，并且不利于调试。但我想知道的是:

this.$root 方法是否只有调试方面的缺点？ 除了调试相关问题之外，使用this.$root来改变根数据还有其他问题吗？如果是的话，任何人都可以给我一个小例子来展示这个问题，因为我无法想出任何情况来避免使用它(假设我的 vue 应用程序不是那么大和复杂)。提前致谢!

Answer 1

这都是关于架构的好与坏。您应该始终设计代码，以便共享尽可能少的数据(这甚至与 Vue 无关)。

您的 vue 组件具有私有(private)和公共(public)方法和字段。考虑组件中的所有方法都是私有(private)的。并将 $emit 和 props 公开。访问私有(private)方法和字段总是一个坏主意，为什么？:

• 尚不清楚谁改变了状态。如果您有类似@click某个深层子级的东西，您可能最终会重新渲染整个组件树，因为您可能想更改根内部的data。
• 您将如何对组件进行单元测试？您始终需要附加根目录。
• 好吧，想象一下您有一个巨大的企业应用程序。并且您可以在多个位置访问 $root。现在，一位新开发人员来更改一个组件的调用签名，但忘记更改另一个组件的调用签名。您最终会遇到一个损坏的应用程序。和vuex有什么区别？在你的 vuex 中，你应该有模块，这样就不会有一个地方可供所有组件访问。
• 所以调试。像 vue-devtools 这样的工具跟踪 vuex 但不跟踪状态。现在想象一下，组件中的某些数据发生了神奇的变化。这是因为另一个开发人员做了类似 setInterval(() => $root.setDataTime(Current time ${Date.now()}), 1000) 的操作。您检查了更改，发现 vuex 和组件中都没有提交。