IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue.use的使用和基本原理 -> 正文阅读

[JavaScript知识库]Vue.use的使用和基本原理

Vue.use的使用和基本原理

介绍与使用

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

如下:

  1. 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/>',
    });
    
    
  2. 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(插件)之后,函数会被立即执行

也就是说:

  1. Vue.use参数为函数(插件为函数)时,函数的参数是Vue对象
  2. 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 以外,还可以按需要传入自定义参数,如(两种方式都可以,这里拿参数为对象形式举例)

    自定义一个demo文件:

    const demo = {
    	// 参数为对象时,需要提供install方法
        install: (Vue, a, b, c) => {
            console.log('自定义插件', Vue, a, b, c);
            // 定义一些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, 1, 2, {name:'小明'}); // 安装自定义插件
    
    /* eslint-disable no-new */
    // 把vue实例挂载在window.vm,方便使用vue的实例
    window.vm = new Vue({
      el: '#app',
      router,
      store,
      components: {
        App,
      },
      template: '<App/>',
    });
    
    

Vue.use源码

import { toArray } from '../util/index'
// Vue.use 源码
export function initUse (Vue: GlobalAPI) {
	// 首先先判断插件plugin是否是对象或者函数:
	Vue.use = function (plugin: Function | Object) {
		const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
		// 判断vue是否已经注册过这个插件,如果已经注册过,跳出方法
		if (installedPlugins.indexOf(plugin) > -1) {
			return this
		}
		
		// 取vue.use参数,toArray() 方法代码在下一个代码块
		const args = toArray(arguments, 1)
		args.unshift(this)
		// 判断插件是否有install方法,如果有就执行install()方法。没有就直接把plugin当Install执行。
		if (typeof plugin.install === 'function') {
			plugin.install.apply(plugin, args)
		} else if (typeof plugin === 'function') {
			plugin.apply(null, args)
		}
		installedPlugins.push(plugin)
		return this
	}
}

// toArray 方法源码
export function toArray (list: any, start?: number): Array<any> {
	start = start || 0
	let i = list.length - start
	const ret: Array<any> = new Array(i)
	while (i--) {
		ret[i] = list[i + start]
	}
	return ret
}

文章参考:https://blog.csdn.net/weixin_43788115/article/details/103384064?spm=1001.2014.3001.5506

  JavaScript知识库 最新文章
使用node.js设置本地api接口
【Vue】npm run serve 和 npm run dev 有什
Vue美食杰项目实现个人编辑资料效果
分享在写js代码时容易遇到的,需要注意的问
js中的两种作用域
layui学习之路——删除数据表格记录
登录页【利用token登录状态保存】
Html+css+JavaScript做一个随机点名器
JavaScript中什么是原型什么又是原型链?
node js BigInt问题
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 11:49:36  更:2021-07-17 11:51:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年9日历 -2021/9/27 2:46:30-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码