Vue.use的实现原理

一、Vue.use 是做什么的？

use 概念
如果你希望编写一个 Vue.js 插件来扩展应用的功能，需要提供一个 install 方法。如果插件是一个对象，那么这个对象必须包含 install 方法；如果插件是一个函数，那么这个函数将被作为 install 方法。当 install 方法被调用时，Vue 实例会作为参数传入，这样插件就不再需要直接依赖 Vue。(扩展应用的功能)

示例：

// 定义一个插件对象
const MyPlugin = {// 定义 install 方法install(Vue) {// 添加全局方法或属性Vue.myGlobalMethod = function() {// 全局方法逻辑};// 添加全局指令Vue.directive('my-directive', {bind(el, binding, vnode, oldVnode) {// 全局指令逻辑}});// 添加实例方法Vue.prototype.$myMethod = function(methodOptions) {// 实例方法逻辑};}
};// 使用插件
Vue.use(MyPlugin);

插件的功能
添加全局指令、全局过滤器(Vue3 不再支持过滤器)、全局组件。
通过全局混入来添加一些组件选项。
添加实例方法，通过把它们添加到 Vue.prototype / app.config.globalProperties上实现。
实现原理

Vue.use = function (plugin) {// 插件缓存const installedPlugins = this._installedPlugins || (this._installedPlugins = []);// 检查是否已经安装过该插件，如果是则直接返回if (installedPlugins.indexOf(plugin) > -1) {return this;}// 整合除了第一个参数（plugin）之外的其他参数为数组const args = toArray(arguments, 1);// 将 Vue 实例作为第一个参数放入数组中args.unshift(this);// 判断插件类型并安装if (typeof plugin.install === "function") {// 如果插件是一个对象，则调用其 install 方法plugin.install.apply(plugin, args);} else if (typeof plugin === "function") {// 如果插件是一个函数，则直接调用该函数plugin.apply(null, args);}// 将插件缓存起来installedPlugins.push(plugin);// 返回 Vue 实例return this;
};