vue知识点之Vue.use的使用和基本原理

介绍与使用

Vue.use() （vue2.x是Vue.use,vue3.x是app.use）在 vue 中使用很多，比如 ElementUI, vantUI, VueI18n, Router, Vuex 等部分第三方库、组件、自定义方法等，在引用后会使用 Vue.use 将他们传入作为参数使用

vue2.x使用Vue.use()

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
// 引入国际化插件
import VueI18n from 'vue-i18n';
// 引入统一配置
import common from './lib/common';
// 引入animate.css
import animated from 'animate.css';

Vue.use(animated);
Vue.use(VueI18n); // 通过插件的形式挂载
Vue.use(common); // 全局配置项

/* eslint-disable no-new */
// 把vue实例挂载在window.vm,方便使用vue的实例
window.vm = new Vue({
  el: '#app',
  router,
  store,
  components: {
    App,
  },
  template: '<App/>',
});

vue3.x使用app.use()

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vant from 'vant';
import 'vant/lib/index.css';
import globalFunction from './utils/globalFunction'; // 引入全局方法

const app = createApp(App);

app.use(vant);
app.use(store);
app.use(router);

// 挂载全局方法
for (const key in globalFunction) {
  app.provide(key, globalFunction[key]);
  console.log(key);
}

app.mount('#app');

window.vm = app;

先看一下官方给的文档说明：

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

⚠️需要注意的是：通过Vue.use安装 Vue.js 插件，如果插件是一个对象，那么对象当Vue.use(插件)之后，插件的install方法会立即执行；如果插件是一个函数，当Vue.use(插件)之后，函数会被立即执行

也就是说：

Vue.use参数为函数（插件为函数）时，函数的参数是Vue对象
Vue.use参数为对象（插件为对象）时，它提供的install方法中参数是Vue对象

所以可以进行以下尝试（以vue2.x的使用为例，3.x写法与2.x类似）：

⏰ 1. 首先是 Vue.use参数为对象（插件为对象）时

自定义一个demo文件：

const demo = {
    // 参数为对象时，需要提供install方法
    install: (Vue) => {
        console.log('自定义插件', Vue);
        // 定义一些vue中常用的全局方法
        Vue.prototype.$Toast = () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用
        Vue.prototype.$request = () => { console.log('全局request请求') }; // request请求,通过this.$request调用
    }
}

export default demo;

main.js中通过Vue.use安装自定义的demo插件：

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

import demo from './lib/demo';
Vue.use(demo); // 安装自定义插件

/* eslint-disable no-new */
// 把vue实例挂载在window.vm,方便使用vue的实例
window.vm = new Vue({
  el: '#app',
  router,
  store,
  components: {
    App,
  },
  template: '<App/>',
});

⏰ 2. 接下来是 Vue.use参数为函数（插件为函数）时

自定义一个common文件：

const common = (Vue) => {
  console.log('自定义插件', Vue);
  // 定义一些vue中常用的全局方法
  Vue.prototype.$Toast = () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用
  Vue.prototype.$request = () => { console.log('全局request请求') }; // request请求,通过this.$request调用
};
export default common;

main.js中通过Vue.use安装自定义的common插件：

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

import common from './lib/common';
Vue.use(common); // 安装自定义插件

/* eslint-disable no-new */
// 把vue实例挂载在window.vm,方便使用vue的实例
window.vm = new Vue({
  el: '#app',
  router,
  store,
  components: {
    App,
  },
  template: '<App/>',
});

⏰ 3. 插件除了默认的参数 Vue 以外，还可以按需要传入自定义参数，如（两种方式都可以，这里拿参数为对象形式举例）