概述

我们知道，使用 app.use('plugin') 就可以对某个插件进行全局注册，注册过后该插件就在全局生效了，就可以进行使用了。但是 Vue 插件安装内部做了哪些工作呢？如何就生效了呢？

插件安装的本质

事实上，Vue的插件注册方法 use 接收两种类型，一种类型是对象，另一种类型是函数。

针对对象

对于对象而言，传入的对象必须有一个 install 属性，该属性对应一个函数，use方法针对传入的对象进行插件注册的话执行的就是该对象内部的install方法，并给install方法传递一个Vue实例对象 app 作为其参数。 eg:

// 方式一: 传入对象的情况
app.use({
  install: function(app) {
    console.log("传入对象的install被执行:", app)
  }
})

针对函数

对于函数而言，use方法执行就是该函数，与对象类型相同，它也会在执行时给传入的方法传递一个Vue实例对象 app 作为其参数。 eg:

// 方式二: 传入函数的情况
app.use(function(app) {
  console.log("传入函数被执行:", app)
})

应用

下面以自定义指令的注册来对Vue插件安装做进一步说明。 /directives/focus.js

export default function directiveFocus(app) {
  app.directive("focus", {
    // 生命周期的函数(自定义指令)
    mounted(el) {
      // console.log("v-focus应用的元素被挂载了", el)
      el?.focus()
    }
  })
}

/directives/ftime.js

import dayjs from 'dayjs'

export default function directiveFtime(app) {
  app.directive("ftime", {
    mounted(el, bindings) {
      // 1.获取时间, 并且转化成毫秒
      let timestamp = el.textContent
      if (timestamp.length === 10) {
        timestamp = timestamp * 1000
      }

      timestamp = Number(timestamp)

      // 2.获取传入的参数
      let value = bindings.value
      if (!value) { 
        value = "YYYY-MM-DD HH:mm:ss"
      }

      // 3.对时间进行格式化
      const formatTime = dayjs(timestamp).format(value)
      el.textContent = formatTime
    }
  })
}

/directives/unit.js

export default function directiveUnit(app) {
  app.directive("unit", {
    mounted(el, bindings) {
      const defaultText = el.textContent
      let unit = bindings.value
      if (!unit) {
        unit = "¥"
      }
      el.textContent = unit + defaultText
    }
  })
}

/directives/index.js

import directiveFocus from "./focus"
import directiveUnit from "./unit"
import directiveFtime from "./ftime"

export default function directives(app) {
  directiveFocus(app)
  directiveUnit(app)
  directiveFtime(app)
}

main.js

import { createApp } from 'vue'
import directives from "./directives/index"

// 自定义指令的方式一:
// const app = createApp(App)
// directives(app)
// app.mount('#app')

// 自定义指令的方式二:使用插件
createApp(App).use(directives).mount("#app")

总结

综上，Vue插件的安装本质上是将插件的功能集成到Vue实例中，使其成为全局可用的，这样可以在Vue应用的任何地方使用插件提供的扩展功能。插件安装的 use 方法接收两种类型 -- 对象和函数，但无论哪一种，都是执行对应的回调函数并将Vue实例对象作为参数传入进行注册。