vue.use()的使用和原理

参考：https://blog.csdn.net/lhjuejiang/article/details/110667201

1. 官方解释

Vue.use( plugin )
参数：{Object | Function} plugin

用法：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。

以上就是非人类语言，下面我们使用人类语言具体说一下。

2. 实例解析

实例：（Element组件调用）

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

可以看到，我们在安装完组件以后使用 use 就能完成组件注册使用，官方叫“组件挂载”。

那是怎么挂载的呢？

其实在组件代码中会有类似这样的部分：

import Icon from '../components/icon/index'
const IconConponents = {
    
    
  install: function (Vue) {
    
     // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    Vue.component('Icon', Icon)
  }
}
// 导出
export default IconConponents

注意代码中的install，他的作用是“install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。”

我们再看，main.js 引入时：

import Icon from './global'
Vue.use(Icon)

仔细看，其实际就是3步实现：

1. 外界 use 引入组件，触发内部 install 方法，并且传了一个Vue对象；
2. 进入以后通过 component 注册一个全局组件（全局组件知识点）；
3. 最后，外部就可以全局使用组件了。

全局使用：

<Icon type="arrow-left" color="red" size="28"></Icon>

以上就是 use 的基本原理，当然还有比较复杂的，但基本运行机制就是这样。

3. 浅谈全局注册组件

• 引入 Vue 对象
• 引入 loading 组件
• 将 loading 注册为全局组件，在别的组件中通过标签使用Loading组件

import Vue from 'vue'; 
import Loading from './loading.vue'; 
Vue.component('loading', Loading);