Vue.use原理及源码解读

时间:2023-12-21 19:12:32

vue.use(plugin, arguments) 语法

  • 参数:plugin(Function | Object)
  • 用法:
    如果vue安装的组件类型必须为Function或者是Object<br/>

    如果是个对象,必须提供install方法

    如果是一个函数,会被直接当作install函数执行

    install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments


组件.js
export const testObj = {
install(Vue, arg) { }
}
export const testFn = founction(Vue, arg) { } index.js
import { testObj, testFn } from './组建.js'
Vue.use(testObj, arg)
Vue.use(testFn, arg)

建议组件采用第一种写法,根据use源码,当采用第二种写法时,this指针指向null


if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}

官方use源码


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) &gt; -1) {
//判断该组件是否注册过,存在return Vue对象
return this
}
//调用`toArray`方法
const args = toArray(arguments, 1)
args.unshift(this)
//将Vue对象拼接到数组头部
if (typeof plugin.install === 'function') {
//如果组件是对象,且提供install方法,调用install方法将参数数组传入,改变`this`指针为该组件
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
//如果传入组件是函数,这直接调用,但是此时的`this`指针只想为`null`
plugin.apply(null, args)
}
//在保存注册组件的数组中添加
installedPlugins.push(plugin)
return this
}
}

toArray方法源码


export function toArray (list: any, start?: number): Array&lt;any&gt; {
start = start || 0
let i = list.length - start
//将存放参数的数组转为数组,并除去第一个参数(该组件)
const ret: Array&lt;any&gt; = new Array(i)
//循环拿出数组
while (i--) {
ret[i] = list[i + start]
}
return ret
}

原文地址:https://segmentfault.com/a/1190000017162947