从每个组件调用 main.js V/s 调用 new Vue() 的区别

Difference between calling new Vue() from main.js V/s calling from each and every component

我有一个项目,我使用 #app.mountedmain.js 初始化了 new Vue()

此后,我将每个组件的所有路由器视图注入到应用程序中。

现在,我想的是我应该在每个组件中调用 new Vue(),而不是从一个中央 main.js 文件调用。

我想问 calling/importing Vue 并从每个文件初始化的这种方法是否是一个好方法,或者我应该坚持从一个中央文件初始化。

包含多个 Vue 实例是完全有效的,这没有任何问题,只要它们是独立的并且不依赖于其他 Vue 实例。在 Vue 实例初始化之后访问它仍然是可以的,因为这并没有破坏松耦合的原则,因此它们之间仍然可以相互隔离。

将两个 Vue 实例添加到同一页面,它们对 DOM 的不同部分进行操作。这对于向页面添加小部件非常有用,例如,一个 Vue 实例将负责页面右侧的表单,而另一个将控制导航。

但是,因为在小范围内不是什么大问题,它很快就会导致代码很难维护。因为你的 Vue 实例将不再相互隔离,所以很难弄清楚它们之间的依赖关系,并且在一个 Vue 实例中更改某些内容很容易破坏 another.I 只是想建议你远离这种方法。

单个 Vue 实例绑定到整个页面并在一个组件中完成所有逻辑,这很快就会变得混乱。这完全取决于您要实现的目标,但是 vuex 可以帮助您在使用多个组件时保持状态有序。

没有。无需生成新的 Vue 实例。

一般来说,您的应用程序中应该只存在一个 Vue 实例。

可能导致您创建多个 Vue 实例的特殊用例:

  • Event Bus: 它需要一个新的 Vue 实例。
  • 正在您遗留的不同部分安装 Vue 个实例 DOM。如果您从头开始创建 Vue 应用程序,则永远不需要它。

我强烈建议您在做出已经解决的决定之前先看看 high-quality solutions (templates) 已经为您准备并由大型社区维护的内容。