vue源码-vue.use()

最新推荐文章于 2024-06-10 14:13:49 发布

qq_39740095

最新推荐文章于 2024-06-10 14:13:49 发布

阅读量92

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_39740095/article/details/118751516

版权

vue

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue源码-vue.use

vue中可能会用到很多vue.use()，比如ElementUI、Iview等插件。但是axios就不需要，axios的引入方式是：import axios from ‘axios’，这是为什么呢？
因为axios没有install方法。

/* @flow */

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    // // 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

1、vue 首先判断这个插件是否被注册过，不允许重复注册，并且接收的 plugin 参数的限制是 Function | Object 两种类型。

2、首先将我们传入的参数整理成数组： const args = toArray(arguments, 1)；
再将 Vue 对象添加到这个数组的起始位置 args.unshift(this) ,这里的 this 指向 Vue 对象；

3、如果我们传入的 plugin(Vue.use的第一个参数) 的 install 是一个方法。也就是说如果我们传入一个对象，对象中包含 install 方法，那么我们就调用这个 plugin 的 install 方法并将整理好的数组当成参数传入 install 方法中， plugin.install.apply(plugin, args)；

4、如果我们传入的 plugin 就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入， plugin.apply(null, args)；

5、给这个插件添加至已经添加过的插件数组中，标示已经注册过 installedPlugins.push(plugin)；

6、返回 Vue 对象。

1、参数为函数时，函数的参数是Vue对象
2、参数为对象时，它提供的install方法中参数是Vue对象
3、默认的参数 Vue 以外，还可以按需要传入自定义参数(两种方式都可以)
Vue.use(uicpm，1,2,{name:‘小明’})
4、Vue.use中可以进行一些自定义操作，如注册组件

/****************Loading组件*****************/
<template>
    <div>Loading</div>
</template>
<script>
export default {
    name: 'Loading'
}
</script>
/******Loading.js****/
import Loading from '@/components/Loading'
const Loading = {
    install: (Vue) => {
    	Vue.component('Loading', Loading)
    }
}
export default Loading

/******main.js 调用 Vue.use 的代码****/
// 在引入demo.js，并且使用 Vue.use() 调用
import Loading from '@/components/Loading.js'
Vue.use(Loading)