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

Question

在vue的官方文档中，我在edge cases部分找到了关于$root的用法。 “边缘案例”使我觉得使用this.$root（或this.$parent）来突变子组件中的根实例的数据是不正常或不建议的。

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

正如文档所述，this.$root何时更改根数据无法跟踪何时以及何处发生数据更改，因此不利于调试。但是我想知道的是：

this.$root方法在调试方面是否只有缺点？ 除与调试相关的问题外，使用this.$root更改根数据还有其他问题吗？如果可以，那么任何人都可以给我举一个小例子来说明这个问题，因为我想不出任何避免使用它的情况（假设我的vue应用程序没有那么大和复杂）。预先感谢！

Answer 1

这都是关于好的和坏的体系结构。您应该始终设计代码，以便共享最少的数据（甚至与Vue无关）。

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

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