vue.use的深度剖析

1.1 use 概念

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 instal方法。install 方法调用时，会将Vue 作为参数传入,这样插件中就不在需要依赖 Vue 了

1.1.1 代码解析

以下是vue2的VUE.use使用

• 插件1是对象形式，所以必须要有install
• 插件2是函数形式

其中插件中的第一个参数都会传入VUE，这样插件就不需要自己去依赖VUE，导致插件中的VUE版本和项目不一致的情况了

1.2 插件的功能

• 添加全局指令、全局过滤器、全局组件。
• 通过全局混入来添加一些组件选项。
• 添加 vue 实例方法，通过把它们添加到 vue.prototype 上实现

1.2.1 vue-router源码解析

源码地址：https://github.dev/vuejs/vue-router/src/install.js

1.3实现原理

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); // 将Vue放入到数组中
    if (typeof plugin.install === "function") {
        // 调用install方法
        plugin.install.apply(plugin, args);
    } else if (typeof plugin === "function") {
        // 直接调用方法
        plugin.apply(null, args);
    }
    installedPlugins.push(plugin); // 缓存插件
    return this;
};

1.4总结

插件的本质就是是一个函数，vue.use可以执行插件函数，并把VUE进行入参传入，插件内就可以对VUE属性等进行改造，不需要插件自身再引入VUE