前言
对于组件的使用场景以及频率来说，有些组件使用的比较频繁，很多模块都可以使用这个组件，而有些组件，仅限于当前业务模块使用，我们就可以根据情况来进行相应的全局注册或者局部注册。而如何注册以及相较于局部注册，全局注册又带来了什么问题呢？下面我们就来看一看。
全局注册
全局组件的话我们可以使用vue实例提供的component方法进行注册，以便该组件可以被其他任意组件在内部使用。
import { createApp } from 'vue' import ComponentA from './component' const app = createApp({}) app.component( // 注册的名字 'ComponentA', // 组件的实现 ComponentA ) 复制代码
而且他也是可以进行链式调用的。
app .component('ComponentA', ComponentA) .component('ComponentB', ComponentB) .component('ComponentC', ComponentC) 复制代码
局部注册
局部注册的话，只需要在需要使用子组件的父组件中进行注册即可。在<script setup>中直接导入相应的组件即可在模板中使用。
<script setup> import ComponentA from './ComponentA.vue' </script> <template> <ComponentA /> </template> 复制代码
二者的优缺点
- 对于全局注册的组件来说，在组件的使用上变得更加方便，但与之带来问题的就是在一些业务比较复杂的大型项目中，二者的依赖关系变得模糊。要定位相应的全局组件时，也变得比较麻烦，对于项目的长期维护来说，难度也会进行相应的增长。
- 相比之下，局部注册组件的方式使二者之间的依赖关系变得更加清晰。而对于需要使用多个组件的模块，则会抒写较多的导入组件的代码。
- 还有一点需要注意的是，全局注册的组件，即使你并没有使用，他也会打包到相应的js文件中，并不会对没有使用的组件进行自动移除（tree-shaking）。
- 而局部注册的组件对于tree-shaking更加的友好。
