注册
一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。
1. 全局注册组件：
在 Vue 3 中，可以使用createApp方法创建一个应用实例，并使用其component方法全局注册组件。全局注册的组件可以在整个应用中的任何地方使用。
// 创建一个 Vue 应用实例 const app = createApp({/* options */}); // 全局注册一个组件 app.component('my-component', { // 组件的选项 }); // 挂载应用 app.mount('#app');
2. 局部注册组件：
局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
<template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { 'my-component': MyComponent }, // 其他组件选项 }; </script>
使用<script setup>语法糖使用局部组件，只需要引用之后直接使用就行。不需要注册。
3. 使用组合式 API 注册组件：
在 Vue 3 中，还可以使用组合式 API 注册组件。这是一种相对新的 API 风格，可以更灵活的方式组织组件逻辑。
import { defineComponent } from 'vue'; const MyComponent = defineComponent({ // 组件选项 }); const app = createApp({ components: { 'my-component': MyComponent }, // 其他组件选项 }); app.mount('#app');
4. 自动全局注册：
也可以通过自动全局注册的方式，将components目录下的所有组件自动注册为全局组件。这需要在应用初始化时使用require.context。
const app = createApp({/* options */}); const files = require.context('./components', false, /\.vue$/); files.keys().forEach(key => { const componentConfig = files(key); const componentName = key.split('/').pop().split('.')[0]; app.component(componentName, componentConfig.default || componentConfig); }); app.mount('#app');
注意
全局注册组件可能会引发类似的问题，不管是普通的全局组件还是通过 <script setup> 语法糖。下面是一些注意事项：
- 未使用的组件无法被自动移除：
- 如果全局注册了一个组件，但在应用中并没有实际使用它，这个组件在生产打包时可能无法被自动移除。这可能导致打包后的代码包含未使用的组件，增加了文件大小。
- 依赖关系不够明确：
- 当所有组件都全局注册时，特别是在大型项目中，组件之间的依赖关系可能不够明确。这使得查找组件的实现和理解应用结构变得更加困难，从而影响了项目的可维护性。
- 全局注册过多可能导致性能问题：
- 如果应用中存在大量全局注册的组件，可能会导致应用启动时加载过多的组件代码，影响应用的性能。这是因为所有这些组件的代码都需要在应用启动时被下载和解析。
对于这些问题，可以考虑一些优化方式：
- 按需注册： 尽量只全局注册那些确实在整个应用中需要被频繁使用的组件。对于仅在某些页面或组件中使用的组件，可以考虑在局部注册或者按需注册。
- 组件懒加载： 对于不是在应用初始化时就必须加载的组件，可以考虑使用路由懒加载或动态导入等技术，以减小应用启动时的初始负载。
- 模块化开发： 尽可能采用模块化的开发方式，将组件按照功能或业务逻辑划分成模块，而不是全部都全局注册。这有助于更清晰地了解组件之间的依赖关系。
公共组件
一般项目里有个公共的components一个专门的文件夹（通常称为components）中存放所有的组件，并在需要的地方进行引用，而不是通过全局注册。这种做法可以更好地组织和管理组件。
这种方式有一些优势：
- 模块化组织： 将所有组件放在一个专门的文件夹中，有助于模块化地组织你的应用。每个组件都可以有自己的文件，便于查找和维护。
- 避免全局注册的缺点： 全局注册组件可能导致一些问题，如性能问题和命名冲突。通过手动引入，你有更多的控制权，可以选择在需要的地方引入组件，而不是在整个应用中都注册。
- 减小打包体积： 只引入你真正需要的组件，有助于减小应用的打包体积。这对于优化应用的性能和加载时间是有帮助的。
示例：
// components/MyComponent.vue <template> <div> <h2>This is MyComponent</h2> </div> </template> <script> export default { // 组件选项 }; </script>
然后在其他组件中引入：
// 在其他组件中引入 <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from '@/components/MyComponent.vue'; export default { components: { 'my-component': MyComponent }, // 其他组件选项 }; </script>
实际上是一种局部注册组件的变体，也可以看作是手动管理的局部注册。但本质上也是在需要的地方引入并注册了组件。
小结
- 局部注册的组件在后代组件中并不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。
- 使用 PascalCase 作为组件名的注册格式。Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。
