vue3组件注册

注册

一个 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> 语法糖。下面是一些注意事项：

1. 未使用的组件无法被自动移除：

   • 如果全局注册了一个组件，但在应用中并没有实际使用它，这个组件在生产打包时可能无法被自动移除。这可能导致打包后的代码包含未使用的组件，增加了文件大小。

2. 依赖关系不够明确：

   • 当所有组件都全局注册时，特别是在大型项目中，组件之间的依赖关系可能不够明确。这使得查找组件的实现和理解应用结构变得更加困难，从而影响了项目的可维护性。

3. 全局注册过多可能导致性能问题：

   • 如果应用中存在大量全局注册的组件，可能会导致应用启动时加载过多的组件代码，影响应用的性能。这是因为所有这些组件的代码都需要在应用启动时被下载和解析。

对于这些问题，可以考虑一些优化方式：

• 按需注册： 尽量只全局注册那些确实在整个应用中需要被频繁使用的组件。对于仅在某些页面或组件中使用的组件，可以考虑在局部注册或者按需注册。

• 组件懒加载： 对于不是在应用初始化时就必须加载的组件，可以考虑使用路由懒加载或动态导入等技术，以减小应用启动时的初始负载。

• 模块化开发： 尽可能采用模块化的开发方式，将组件按照功能或业务逻辑划分成模块，而不是全部都全局注册。这有助于更清晰地了解组件之间的依赖关系。

公共组件

一般项目里有个公共的components一个专门的文件夹（通常称为components）中存放所有的组件，并在需要的地方进行引用，而不是通过全局注册。这种做法可以更好地组织和管理组件。

这种方式有一些优势：

1. 模块化组织： 将所有组件放在一个专门的文件夹中，有助于模块化地组织你的应用。每个组件都可以有自己的文件，便于查找和维护。

2. 避免全局注册的缺点： 全局注册组件可能导致一些问题，如性能问题和命名冲突。通过手动引入，你有更多的控制权，可以选择在需要的地方引入组件，而不是在整个应用中都注册。

3. 减小打包体积： 只引入你真正需要的组件，有助于减小应用的打包体积。这对于优化应用的性能和加载时间是有帮助的。

示例：

// 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 注册的组件。