乘风原创程序

  • Vue.use()的用法和install的用法解析
  • 2022/3/29 11:10:20
  • vue.use()和install用法

    介绍

    在vue的main.js中,我们经常使用vue.use(xx)方法。比如我们引入elementui,在main.js中,我们一般通过如下代码引入:

    import elementui from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    vue.use(elementui)

    为什么这样做?

    官方解释

    安装 vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。

    install 方法调用时,会将 vue 作为参数传入。什么意思呢? vue.use() 中的参数必须是一个function函数或者是一个object对象,如果是对象的话,必须在对象中提供一个install方法。之后会将 vue 作为参数传入。

    总结:

    如果vue.use() 中的参数是一个function函数,那么函数的参数是vue对象。

    如果vue.use() 中的参数是一个object对象,那么这个对象必须提供一个install方法,install方法的参数就是vue。

    vue.use为什么要使用install

    疑问

    vue.use注册插件和vue.prototype.xxx挂载方式有什么区别,使用vue.use优势在哪,为什么使用vue.use而不使用vue.prototype.xxx

    从源码分析

    // vue源码文件路径:src/core/shared/util.js
    export function toarray (list: any, start?: number): array<any> {
      start = start || 0
      let i = list.length - start
      const ret: array<any> = new array(i)
      while (i--) {
        ret[i] = list[i + start]
      }
      return ret
    }
    
    // vue源码文件路径:src/core/global-api/use.js
    import { toarray } from '../util/index'
    export function inituse (vue: globalapi) {
      vue.use = function (plugin: function | object) {
        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官网是这样说的

    在这里插入图片描述

    install方法应该就是解决防止插件多次注册的情况吧;如果使用vue.prototype.xxx挂载,每使用一次就要重新挂载一次。

    个人理解,还请大佬指正解释一下install的优势

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。