vue3 app.use()的作用小結(jié)

更新時間：2026年01月22日 09:18:37 作者：Wiktok

Vue3中的app.use(plugin)是全局安裝插件的核心方法,它通過調(diào)用插件的install方法,一次性為整個應(yīng)用注入功能,下面就來詳細(xì)的介紹一下,感興趣的可以了解一下

一、類比理解

Vue3 施工隊(duì)（createApp() 返回的實(shí)例）
plugin（外掛）可以是一把“電動螺絲刀”、一套“中央空調(diào)”、或者一塊“共享黑板”。
app.use(plugin) 相當(dāng)于隊(duì)長說：“大家停一下，先把這套設(shè)備裝上，以后誰想用直接用。”

二、官方定義

app.use(plugin, options) 會調(diào)用插件的 install(app, options) 方法，并保證同一個插件只會被安裝一次。

三、最常見的 3 類外掛

全局功能增強(qiáng)（例：Router、Pinia、i18n）

import { createRouter } from 'vue-router'
const router = createRouter(...)
app.use(router)               // 所有組件都能 this.$router / useRouter()

全局自定義組件/指令（例：Element-Plus、自定義 loading 指令）

import ElementPlus from 'element-plus'
app.use(ElementPlus)          // 全局可用 <el-button> 等

工具/調(diào)試類（例：devtools、mock、日志）

import { createPinia } from 'pinia'
app.use(createPinia())        // 狀態(tài)管理倉庫一次性裝好

四、自己寫一個最小插件

// my-logger.js
export default {
  install(app, options = {}) {
    // 1. 添加全局屬性
    app.config.globalProperties.$log = (msg) => {
      console.log(`[${options.tag || 'APP'}]`, msg)
    }

    // 2. 添加全局自定義指令
    app.directive('focus', {
      mounted(el) { el.focus() }
    })

    // 3. 添加全局組件（可選）
    // app.component('MyButton', {...})
  }
}

使用：

import { createApp } from 'vue'
import App from './App.vue'
import MyLogger from './my-logger.js'

const app = createApp(App)
app.use(MyLogger, { tag: '別墅' })   // 安裝插件并傳參
app.mount('#app')

以后在任何組件里都能：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$log('Hello from any room!')
</script>

<template>
  <input v-focus />
</template>