vue.use()方法

最新推荐文章于 2025-11-13 14:53:39 发布

原创最新推荐文章于 2025-11-13 14:53:39 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文解析Vue.use()的内部实现，介绍了如何防止插件重复安装，并展示了如何正确处理插件的install方法或直接调用。适合理解Vue插件注册过程的开发者。

当我们在vue项目中使用插件时，常使用vue.use()方法。

use源码如下

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // 防重复安装插件，_installedPlugins检测，vue.use多次是不会造成重复注册的
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // 插件参数 由类数组=》数组
    const args = toArray(arguments, 1)
    // 将vue实例 放入第一个参数
    args.unshift(this)
    // 通常vue使用的插件 要不然是含有install方法的对象，要不然本身是function
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}