前言

对于组件的使用场景以及频率来说，有些组件使用的比较频繁，很多模块都可以使用这个组件，而有些组件，仅限于当前业务模块使用，我们就可以根据情况来进行相应的全局注册或者局部注册。而如何注册以及相较于局部注册，全局注册又带来了什么问题呢？下面我们就来看一看。

全局注册

全局组件的话我们可以使用 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 更加的友好。