Vue.use(plugin)

最新推荐文章于 2023-06-20 16:34:33 发布

Ycj_3355

最新推荐文章于 2023-06-20 16:34:33 发布

阅读量196

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39173779/article/details/129398965

版权

Vue.use是用于注册插件的API，它会检查插件是否已安装，未安装则调用插件的install方法，并传入Vue实例。插件可以是包含install方法的对象或直接是函数。当install方法被多次调用，插件只安装一次。文中还给出了Vue.use的源码解析，展示如何处理额外参数和确保插件唯一性。

摘要由CSDN通过智能技术生成

Vue.use(plugin)

如果插件是一个对象，必须提供 install 方法。

如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

Vue.use(plugin)调用之后，插件的install方法就会默认接受到一个参数，这个参数就是Vue（原理部分会将）

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。(源码解析的时候会解析如何实现)

总结：Vue.use是官方提供给开发者的一个api，用来注册、安装类型Vuex、vue-router、ElementUI之类的插件的。

Vue.use方法主要做了如下的事：

检查插件是否安装，如果安装了就不再安装
如果没有没有安装，那么调用插件的install方法，并传入Vue实例

插件是一个函数的情况:

插件(directive)

const install = function(Vue) {
 Vue.directive('hasPermi', hasPermi)
}
export default install

注册插件(directive)

import directive from './directive' // directive
Vue.use(directive)

在这里插入图片描述

注：
// toArray(arguments, 1)实现的功能就是，获取Vue.use(plugin,xx,xx)中的其他参数。
// 比如 Vue.use(plugin,{size:‘mini’, theme:‘black’})，就会回去到plugin意外的参数
const args = toArray(arguments, 1)

Vue中的use原理

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // 获取已经安装的插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 看看插件是否已经安装，如果安装了直接返回
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // toArray(arguments, 1)实现的功能就是，获取Vue.use(plugin,xx,xx)中的其他参数。
    // 比如 Vue.use(plugin,{size:'mini', theme:'black'})，就会回去到plugin意外的参数
    const args = toArray(arguments, 1)
    // 在参数中第一位插入Vue，从而保证第一个参数是Vue实例
    args.unshift(this)
    // 插件要么是一个函数，要么是一个对象(对象包含install方法)
    if (typeof plugin.install === 'function') {
      // 调用插件的install方法，并传入Vue实例
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 在已经安装的插件数组中，放进去
    installedPlugins.push(plugin)
    return this
  }
}