miliqkmiliqk
指南
插件
关于我们
  • 1.X
指南
插件
关于我们
  • 1.X
  • 起步

    • 加 QQ 群交流反馈
    • 介绍
    • 安装
    • 配置
    • 快速上手
    • 内置样式
    • 注意事项
    • 更新日志
  • 插件

    • 使用指南
    • 模拟数据

简要介绍Vue.use的原理

当您使用一些第三方插件或者框架时,经常会看到他们的安装引导处会让您写大概如下的内容:

import miliqk from '@/uni_modules/miliqk-app';

Vue.use(miliqk);

这里第一句没什么好说的,我们着重讲第二句Vue.use(miliqk):
这里我们把miliqk传递给了Vue.use,在Vue内部,是有定义一个use方法的,大概如下:

// 这里的plugin参数就是,就是我们通过Vue.use(miliqk)引入的"miliqk"
Vue.use = function (plugin: Function | Object) {
    
	// ......
	
	const args = toArray(arguments, 1)
	// 这一句很重要,这里的this,就是Vue,把他添加到args数组的第一个元素
	args.unshift(this)
	// 判断我们传递进来的"miliqk",也即这里的"plugin"内部是否有一个叫"install"的方法
	// 如果有,就执行我们的"miliqk",也即"plugin.install"方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
	
	// ......
}

从上面,我们可以看出,Vue的use方法内部,接受了miliqk这个插件,并判断miliqk内部是否有一个叫install的方法,如果有,就执行它,并且 通过apply方法把数组当做参数传递进去(这里数组内部第一个元素Vue这个对象,见上方注释,apply可以把数组[arg1, agr2]形式拆成(arg1, agr2)的形式)

有了上面的分析,我们知道miliqk内部,肯定定义了一个叫install的方法,并且这个方法的第一个参数就是Vue这个对象,miliqk内部如下:

// 这里我们定义了一个叫"install"的变量,它的内容是一个方法(函数)
// 它的第一个参数是Vue对象(上面有提到传进来的第一个参数就是Vue),我们把$miliqk挂载到了Vue.prototype中
const install = (Vue) => {
	Vue.prototype.$miliqk = $miliqk;
}

// 这里我们导出一个对象,内部有一个叫"install"的方法,给上面说的Vue.use调用
export default {
	install
}

从上面我们可以看出,miliqk把"$miliqk"挂载到了Vue.prototype上,所以我们在项目的内部可以使用uni.$miliqk.xxx这种形式。

Last Updated:
Contributors: tuonioooo
关注公众号程序猿的游戏开源工具密圈 获取更多内容