直接开始分析源码
// vue源码文件路径:src/core/global-api/use.js
import { toarray } from '../util/index'
//inituse函数接受也一个参数,参数值为vue实例
export function inituse (vue: globalapi) {
//vue.use函数接受的第一个参数为一个函数或者一个对象(注意:如果是对象,对象里面一定个要有install属性名,且值为一个函数)
vue.use = function (plugin: function | object) {
//声明变量installedpluguns,并指向this._installedpluguns
const installedplugins = (this._installedplugins || (this._installedplugins = []))
//判断插件是否注册过,如果已经注册了,不允许重复注册。
if (installedplugins.indexof(plugin) > -1) {
return this
}
// 把通过vue.use()传入的参数,除开第一个,从第二个参数开始全部取出存储在args中,并向args数组开头添加一个元素,此元素为vue实例,(所以plugin对应的方法在执行的时候,第一个参数永远是vue实例)
const args = toarray(arguments, 1)
args.unshift(this)
//开始执行要注册的插件函数
//1.如果传入的插件是一个对象,且对象中有install属性,且此属性对应的值是一个函数
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
//2.如果传入的插件直接就是一个函数
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
// 把刚刚注册的插件添加到installedplugins中,用作记录是否注册过此插件
installedplugins.push(plugin)
return this
}
}
顺便贴一下(toarray源码)
// vue源码文件路径:src/core/shared/util.js
export function toarray (list: any, start?: number): array<any> {
start = start || 0
let i = list.length - start
const ret: array<any> = new array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
总结:
第一,判断这个插件是否被注册过,如果已经注册了,不允许重复注册。
第二,接收的plugin
参数的限制是function | object
两种类型之一。
以后编写插件的时候可以有两种方式。
一种是将这个插件的逻辑封装成一个对象,最后在install编写业务代码暴露给vue对象。
还有一种则是将所有逻辑都编写成一个函数暴露给vue。
两种方法原理都一样,第二种就是将这个插件直接当成install函数来处理。
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论