vue插件开发之-vue.use()的源码分析。

Posted 2021-02-01 hjdjs

vue是一个渐进式框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。今天我们来看下vue是如何支持框架的。也就是vue.use这部分的实现。

下面我们以vue-router为例来进行说明，

import VueRouter from  ‘vue-router‘
Vue.use(VueRouter)

这段代码大家用过vue-router插件的应该很熟悉了。vue-router就是vue的一个插件了。然后我们首先来看下vue.use的源码实现。

首先，我们看下vue.use()的入参要求。1，含有install方法的一个对象，2，一个function。我们一般都使用1，也就是含有install方法的这个。vue-router也是符合第一种定义的。

那么对应的代码就是

我们可以看到，他会拿到arguments也就是我们所有参数组成的类数组。然后调用toArray，toArray，这个方法用来把类数组转换为数组，接收两个参数，第一个类数组，第二个start

他的作用就是把从start位置到最后的所有元素组成一个数组返回。对我们这里就是再使用vue.use初始化插件时候传入的参数。

接下来拿到返回的数组args调用args.unshift(this).即把vue作为该数组的第一个元素插入到args。

最后调用plugin.install.apply(plugin, args);也就是拿到插件的install方法，以改组件的定义为this。args为参数进行调用。这样就完成了初始化。

最后重点看下刚开始的两行代码

var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

这里用到了备忘录的设计模式，中心思想是如果你已经注册过了。那么我就给你存储起来。下次你再次使用时候就不需要再次做初始化等操作了，可以直接拿到实例。对于性能是很好的优化。那么我们接下里分析下代码

首先vue维护了一个_installedPlugins一个数组，每一次进来时候都会通过installedPlugins.indexOf(plugin)判断这个插件是否已经在这个数组里边了，也就是注册过了。如果已经注册过了直接返回。如果没有注册那么执行接下来的代码，最后代码结束时候把当前pluginpush到installedPlugins中。