美文网首页
关于Vue.use()

关于Vue.use()

作者: 菊花泡茶 | 来源:发表于2018-12-06 11:08 被阅读0次

在vue开发当中,Vue.use()用于引入组件。
下面是use.js的源码
···

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

}
}

···
从源码中可以看到,use.js主要分为判断插件是否存在以及插件的引用两部。
首先,通过vue.use(plugin)接收到的组件plugin,并且类型必须是Function | Object

当插件不存在,继续执行,执行到

    const args = toArray(arguments, 1)
    args.unshift(this)

这两步主要做的是参数的处理。toArray()用于把类数组argument转化为数组,然后通过unshift()将数组右移,在数组首部添加this对象,也就是Vue对象。

下面是toArray源码

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

toArray()接收两个参数arguments和1,生成一个新的数组ret,通过自减赋值ret[i] = list[i + start];。这里的ret其实就是arguments除了第一个元素以外的所有元素。
然后args.unshift(this)会把Vue对象放在args数组头部。

接下来执行的是

    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)

关于这里的判断,上面说过,plugin的类型必须是Function | Object,而对象类型的plugin其实是带有install函数的,比如

const pluginObj = {
  install (...) {
    ...
  }
}

function pluginFun (...) {
  ...
}

也就是说,如果传入的是对象,那就调用插件的install方法并通过apply()方法将install方法改变this的指向为plugin。
args作为参数传递给install方法。
插件类型为function时,插件运行的上下文this指向null(严格模式下;非严格模式下指向window)

installedPlugins.push(plugin)在这之后将插件push到插件数组中,表示已注册。

了解了Vue.use后,对于插件的开发也会有帮助。

相关文章

  • 关于Vue.use()

    在vue开发当中,Vue.use()用于引入组件。下面是use.js的源码··· }} ···从源码中可以看到,u...

  • 关于Vue.use

    先看下源码 从源码中我们可以发现vue首先判断这个插件是否被注册过,如果已经注册过就直接 return 这个插件。...

  • Vue.use源码

    官方对 Vue.use() 方法的说明: 通过全局方法 Vue.use() 使用插件;Vue.use 会自动阻止多...

  • Vue.use() 注册插件(个人笔记)

    Vue.use是什么? 官方对 Vue.use() 方法的说明:通过全局方法 Vue.use() 使用插件,Vue...

  • Vue.use, Vue.component,router-vi

    ? Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue...

  • 关于Vue.use()详解

    问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter...

  • 关于Vue.use()详解

    问题相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)...

  • Vue.use源码数据流

    Vue.use(ElementUI)实现 step1:查看Vue.use 函数,其中我们看到 step2:查看pl...

  • 为什么axios不是使用的vue.use()

    问题 相信很多人在用Vue使用别人的组件时,会用到Vue.use()。例如:Vue.use(VueRouter)、...

  • 关于Vue.use()详细说明

    问题 相信很多人在用Vue使用别人的组件时,会用到Vue.use()。例如:Vue.use(VueRouter)、...

网友评论

      本文标题:关于Vue.use()

      本文链接:https://www.haomeiwen.com/subject/ompuxqtx.html