Vue.use的时候做了什么?

在vue的main中,我们经常用到插件,插件都是用Vue.use(plugin)进行注册的,那么在use的时候到底做了什么?

当我们调用use的时候,会调用插件中的install(设置)函数,并将vue实例传入install方法,

但是同一个插件只会在项目中安装一次,所以,其内部还有的作用就是防止同一插件被安装多次。

所以当Use插件名称时,会进行一个判断,判断插件数组中有没有这个值,没有就push进去,有就返回

Vue.use = function (plugin) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
        return this
    }
 
    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
        plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
        plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
}

例如:自定义全局指令 用vue.use()注册 

定义一个对象,对象里面有install()方法,install方法里面用Vue的自定义指令

const directiveFocus = {
  install(Vue) {
    Vue.directive("fofo", {
      inserted(el) {
        el.focus();
      },
    });
  },
};

Vue.use(directiveFocus)

 

posted @ 2022-08-23 15:43  长安·念  阅读(95)  评论(0)    收藏  举报