uview-plus

# 简要介绍app.use的原理

uview-plus会努力做好框架的内容，同时我们也希望您能学习到一些更深入的知识，我们坚信授之以鱼，不如授之以渔。

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

import uviewPlus from "@/uview-plus";

app.use(uviewPlus);

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

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

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

有了上面的分析，我们知道uview-plus内部，肯定定义了一个叫install的方法，并且这个方法的第一个参数就是app这个Vue对象实例，uview-plus内部如下：

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

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

从上面我们可以看出，uview-plus把"$u"挂载到了app.config.globalProperties上，所以我们在项目页面的内部可以使用this.$u.xxx这种形式。