在main.js中导入组件的优点/缺点（对于VueJS）？

Question

我正在使用vue-cli + webpack作为我的开发环境，并且我将大多数组件包含/声明main.js为Vue.component('<name>',require('./components/<name>.vue'));

在开发/生产中仅在需要时导入组件是否有优势，或者像我现在在main.js文件中进行导入一样没有区别？

Answer 1

我认为全局注册的主要好处是您的组件始终可用，而不必在每个组件中都进行注册。如果您正在注册自己的自定义组件，并且知道不会有任何命名冲突，那很好。真正的问题是，如果要编写可在多个项目中重复使用的组件。

举例来说，我刚刚编写了一个星级应用程序vue，我打算在其中使用多个项目并通过发行npm，因此任何人都可以在其项目中使用该组件。主要组件本身需要另一个名为的组件star。如果我要star在全球范围内注册，那么包含我的星级评定组件的任何项目现在都将在整个应用程序中使用一个名为“ star”的全局组件，但是，如果您已经注册了自己的名为star的组件，则会发生命名冲突，意味着一个组件将覆盖另一个组件：

http://jsfiddle.net/krb23sq3/

在根据需要注册组件时，可以避免任何命名冲突，因为注册的组件仅限于它们自己的范围。在以下示例中，两个组件都注册了一个名为“消息”的组件（并且都使用相同的模板），但是每个组件都引用了一个不同的“消息”组件，因此它们输出不同的消息：

http://jsfiddle.net/24hwu7at/