vue3 全局注册组件不同写法

在 Vue 3 中，全局注册组件app.use(registerGlobComp) 和 registerGlobComp(app) 的功能可以是相似的，它们的实现方式有所不同。

1. app.use(registerGlobComp)

• app.use 是 Vue 3 中注册插件的标准方法。它会触发 registerGlobComp 的 install 方法（如果该方法存在）。use 方法通常用于插件或全局配置的注册。
• registerGlobComp 通常是一个插件对象，它应该暴露一个 install 方法，该方法接收一个 Vue 应用实例 (app) 作为参数。

假设 registerGlobComp 是这样的一个插件：

// src/components/index.ts
import type { App, Component } from 'vue'

import { SvgIcon } from './SvgIcon'
import { SearchForm } from './SearchForm'

const Components: {
  [propName: string]: Component
} = {
 SvgIcon,
 SearchForm,
}

export default {
 // 定义了一个 install 函数，它是一个插件的安装方法(通常这样的 install 方法用于将一个插件或组件库安装到 Vue 应用中)
 install: (app: App) => {
   Object.keys(Components).forEach((key) => {
     // app.component() 是 Vue 应用实例中的方法，用于全局注册一个组件
     app.component(key, Components[key])
   })
 },
}

然后，你使用 app.use(registerGlobComp) 来注册插件：

// main.ts
import registerGlobComp from './components'

app.use(registerGlobComp);

这种方式的关键在于，Vue 会查找插件的 install 方法，并在该方法中执行注册逻辑。

2. registerGlobComp(app)

• 这种写法是直接调用一个普通的函数 registerGlobComp，并传递 app 实例作为参数。在这种写法中，registerGlobComp 不需要是一个 Vue 插件对象，而是一个普通的函数，它接收 app 作为参数来进行注册。

假设 registerGlobComp 是一个普通函数，它直接接收 app 作为参数并注册组件：

// src/components/index.ts
import type { App } from 'vue'
import { SvgIcon } from './SvgIcon'
import { SearchForm } from './SearchForm'

export const registerGlobComp = (app: App<Element>): void => {
  app.component('SvgIcon', SvgIcon),
  app.component('SearchForm', SearchForm)
}

然后你可以直接调用 registerGlobComp(app)：

// main.ts
import { registerGlobComp } from '@/components'

registerGlobComp(app);

对比

• app.use(registerGlobComp)：此写法是 Vue 插件注册的标准方式。它需要 registerGlobComp 是一个对象，并且该对象必须包含一个 install 方法。Vue 会自动调用 install 方法并传递 app 实例。

• registerGlobComp(app)：这种写法是一个简单的函数调用，不依赖于 Vue 插件机制。registerGlobComp 是一个普通的函数，它接收 app 实例并在函数内部执行注册逻辑。

关键区别

1. Vue 插件机制：
   • app.use(registerGlobComp) 是通过 Vue 插件机制注册组件的方式。如果 registerGlobComp 是一个插件对象，并且有 install 方法，那么它遵循 Vue 插件的安装机制。Vue 会自动处理一些插件特有的功能，例如按需引入插件、扩展 Vue 应用实例等。
2. 普通函数调用：
   • registerGlobComp(app) 是直接调用一个普通函数。这种方式没有 Vue 插件的机制，registerGlobComp 只是一个普通的函数，负责注册组件或执行其他操作。

何时使用哪种方式？

• 如果你的 registerGlobComp 是一个插件对象并且需要支持 Vue 插件的机制，应该使用 app.use(registerGlobComp)。
• 如果只是想通过简单的函数调用注册组件或执行一些操作，registerGlobComp(app) 更加简洁直接。

总结

这两种方式在 Vue 3 中实现相似的功能——注册全局组件，但使用场景略有不同：

• app.use(registerGlobComp)：适用于插件对象，使用 Vue 插件机制。
• registerGlobComp(app)：适用于普通函数调用，直接注册全局组件。