持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

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

全局注册

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