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

Question

在 vue 的官方文档中，我$root在边缘案例部分找到了 about 的用法。“边缘案例”让我觉得使用this.$root（或this.$parent）来改变子组件中根实例的数据不是正常或推荐的方式。

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

正如文档所说，何时this.$root改变根数据是不可能跟踪数据更改发生的时间和地点的，也不利于调试。但我想知道的是：

this.$root方法是否只有调试的缺点？除了调试相关的问题，还有没有其他使用this.$root来变异根数据的问题？如果是这样，谁能给我一个小例子来展示这个问题，因为我想不出任何情况来避免使用它（假设我的 vue 应用程序不是那么大和复杂）。提前致谢！

Answer 1

这完全是关于好的和坏的架构。您应该始终设计您的代码，以便尽可能少地共享数据（这甚至与 Vue 无关）。

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

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