谈谈Vue.use的原理

前言

使用过Vue的童鞋都见过这个Vue.use()的方法,但是有没有想过为什么这个方法需要这个方法来使用插件呢？官方[1]介绍有4中四种为Vue添加全局功能的方法:

1.添加全局方法或 property

Vue.myGlobalMethod = function () {
    // 逻辑...
  }

2. 添加全局资源

  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

3. 注入组件选项

  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

4. 添加实例方法

 Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }

注意事项

• 1.通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成
• 2.Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

源码

解读源码

这里的参数plugin是指的是我们的插件,比如ElementUI,Router等,首先需要指出的是这里的this是Vue构造器如下图:

通过定义_installedPlugins对象如果之前注册过取之前注册过的_installedPlugins，否则是空数组。判断这个插件是否存在installedPlugins里面,如果存在结束，这就是为什么多次调用同一插件，插件只会注册一次的原因。如果不存在,我们需要把他push进去，这里再push之前做了参数处理。因为在使用Vue.use()的时候可以传入可选的选项对象。toArray方法的作用是把类似数组的对象转化成真正的数组,源码如下图:

可能有人不明白为什么叫类似数组的对象呢？ 我们需要搞清楚arguments[2]参数定义。arguments 是一个对应于传递给函数的参数的类数组对象。

• args.unshift(this)向前添加this到args,为什么要把这个this放到args的第一个位置上呢？ 这个就和install的传递的参数有关系了,第一个参数是Vue构造器 第二个参数是一个可选的选项options

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

这里可以看到参数plugin在封装的时候需要暴露一个install方法，或者自身是一个方法，不然是无法传递参数的

实战

新建plugin.js文件,创建install方法，我们把clown方法挂在vue实例上。

然后我们通过Vue.use(Plugin)使用,可以在new Vue()之后直接在this直接上调用。

调用结果如下:

参考资料

[1]Vue之插件: https://cn.vuejs.org/v2/guide/plugins.html

[2]arguments: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments