vue use

标签：Vue

const Plugin1 = {
install(a, b, c) {
console.log(‘Plugin1 第一个参数:‘, a);
console.log(‘Plugin1 第二个参数:‘, b);
console.log(‘Plugin1 第三个参数:‘, c);
},
};

function Plugin2(a, b, c) {
console.log(‘Plugin2 第一个参数:‘, a);
console.log(‘Plugin2 第二个参数:‘, b);
console.log(‘Plugin2 第三个参数:‘, c);
}

export { Plugin1, Plugin2 };

// 文件: src/classes/vue-use/index.js

import Vue from ‘vue‘;

import { Plugin1, Plugin2 } from ‘./plugins‘;

Vue.use(Plugin1, ‘参数1‘, ‘参数2‘);
Vue.use(Plugin2, ‘参数A‘, ‘参数B‘);

然后我们在入口文件main.js引用这段代码
// 文件: src/main.js

import Vue from ‘vue‘;

import ‘@/classes/vue-use‘;
import App from ‘./App‘;
import router from ‘./router‘;

Vue.config.productionTip = false;

/ eslint-disable no-new /
new Vue({
el: ‘#app‘,
router,
render: h => h(App),
});

此时我们执行npm run dev打开8080端口开启开发调试工具可以看到控制台输出以下信息

从中可以发现我们在plugin1中的install方法编写的三个console都打印出来，第一个打印出来的是Vue对象，第二个跟第三个是我们传入的两个参数。
而plugin2没有install方法，它本身就是一个方法，也能打印三个参数，第一个是Vue对象，第二个跟第三个也是我们传入的两个参数

源码：
// Vue源码文件路径：src/core/global-api/use.js

import { toArray } from ‘../util/index‘

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

}
}

从源码中我们可以发现vue首先判断这个插件是否被注册过，不允许重复注册。
并且接收的plugin参数的限制是Function | Object两种类型。
对于这两种类型有不同的处理

vue use

标签：Vue

原文地址：http://blog.51cto.com/xuguohongai/2112798