【vue学习】Vue.use

一、源码分析

用vue插件时，我们会引入插件后，调用下Vue.use()，如：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

为啥要执行下Vue.use()呢？我们来看下Vue.use源码

image.png

我们来看下vuex的index.d.ts，导出组件时的写法：

image.png

二、用法介绍

vue.use（plugin, arguments） ，参数：plugin(Function | Object)

说明：

• vue安装的组件类型必须为Function或者是Object
• 若是Object，必须提供install方法
• 若是Function，会被直接当作install函数执行
• install函数接受参数，默认第一个参数为Vue,其后参数为注册组件时传入的arguments

所以我们自己的插件封装方式一般都为Object，提供install方法，案例elementui2如下：

import Cascader from './components/form/src/Cascader'
import Checkbox from './components/form/src/Checkbox'
import ColorPicker from './components/form/src/ColorPicker'
const components = {
    Cascader,
    Checkbox,
    ColorPicker,
}

const install = function(Vue) {
    Object.keys(components).forEach(key => {
        Vue.component(key, components[key])
    })
};

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

Object.assign(components, {
    version: '1.0.1',
    install
})
export default components

三、如上插件不调用use可以吗

也是可以的。我们还是以上述elementui2为例：

我们用Vue.use(elementui2)的时候，用的是对象中的install；全局引入install函数中注册过的组件；

• A. 若不需全局引入，具体某个页面需要用，且只需要引用其中某个或某几个组件，不需要 use，用import 即可：

import  { Cascader,Checkbox } from elementui2
components: { Cascader,Checkbox }

• B. 全局引入后，不用use可不可以呢？也可以啊，就是麻烦点呗，具体页面components配置项配置下即可。

  //我打包的时候，package.json中配置的name是eui
  //main.js中全局引入
  import  eui from elementui2

  //具体页面调用
 let cmpts = { } //这里写页面单独引入的一些组件
 //全部引入也可以： Object.assign(cmpts, eui2）
 Object.assign(cmpts, {Cascader:  eui.Cascader })  
 components: cmpts

四、没有install 函数的 js 库

像jquery、axios、js-cookie等等，很多库，都没有install函数，引入调用也不需要Vue.use，来看下axios的源码：

image.png

在需要的地方引入该js库，调用对应的方法即可。

这种并非专门给vue写的，更非组件，如axios只是一个同时支持支持node端和浏览器端的http库。