Vue3中Vue.use()

一、Vue.use()的作用

Vue.use()是Vue.js提供的一個全局方法，用於給Vue應用安裝插件，它需要在使用插件之前被調用。

Vue插件通常會為Vue應用增加全局功能或者為Vue添加全局組件、指令和混入等。正因為 Vue.use() 只需被調用一次，並具有全局效果，所以若我們想在整個應用程序中使用某個插件，則可以使用這個方法將插件安裝到Vue中。

// 例如，安裝 vue-router 插件:
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

const app = createApp(App)

// 我們可以通過  Vue.use() 來安裝插件。
app.use(router)

// 在這之後可以使用VueRouter來router-link等
app.mount('#app')

二、Vue.use()的實現

Vue.use() 是 Vue.js 官方提供的一個插件安裝方法。在使用 Vue.use() 安裝插件的時候，Vue.js 通過調用插件暴露出來的 install 靜態方法來實現插件的安裝。因此，如果我們的插件想被使用，我們必須要提供一個具備 install 方法的對象。下面是一個簡單的例子:

// 引入插件
import myPlugin from 'myPlugin'

// createApp，createRouter等是工廠函數，用於創建api
import { createApp } from 'vue'

// 創建Vue app
const app = createApp()

// 使用插件
app.use(myPlugin)

// 調用 install 方法
myPlugin.install(app)

三、Vue.use()與組件註冊

Vue.use() 安裝插件時允許第二個可選參數 options，該參數需要有 install 方法，options.install 方法將在插件安裝時被調用。在 Vue.use(plugin, options) 調用時，會將 options 與 plugin 作為參數傳遞給plugin.install 方法。我們可以利用 options 傳遞選項，例如組件庫中某個組件的默認屬性。

下面是一個示例，展示如何在Vue應用中使用自定義組件庫。

// 引入組件庫
import MyComponentLibrary from 'my-component-library'
import { createApp } from 'vue'
import App from './App.vue'

// 傳遞選項
const options = {
    name: 'my-component',
    color: 'blue'
}

// 創建Vue app
const app = createApp(App)

// 使用組件庫
app.use(MyComponentLibrary, options)

// 渲染組件
app.mount('#app')

四、Vue.use()與插件的生命周期鉤子

Vue.use() 方法安裝插件時會自動調用插件的 install 鉤子函數，該鉤子函數在插件加載時只會被調用一次，它接收一個 Vue 的類作為第一個參數，以及一個可選項的對象作為第二個參數，代碼如下

MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或屬性
    Vue.myGlobalMethod = function () {
        // 邏輯...
    }

    // 2. 添加全局資源
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
            // 邏輯...
        }
        ...
    })

    // 3. 注入組件選項
    Vue.mixin({
        created () {
            // 邏輯...
        }
        ...
    })

    // 4. 添加實例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // 邏輯...
    }
}

五、Vue.use()與插件的導出模式

插件可以在不同的環境下使用相同的代碼，可以用 CommonJS, ES modules 或 AMD 的方式導出。此外，插件需要支持 Vue.js 以原型對象為中心的插件 API，例如 Vue.directive、Vue.mixin、Vue.extend 和 Vue.component。

作為 Vue.js 插件的編寫者，我們通常需要把插件同時打包成 CommonJS 和 ES modules 的兩種格式，這樣可以讓插件支持更多的構建工具。

// 使用 ES module 暴露接口
import MyPlugin from './my-plugin.js'
export default MyPlugin

// 使用 CommonJS 暴露接口
var MyPlugin = require('./my-plugin.js')
module.exports = MyPlugin