avatar

Vue.use执行了什么

我们使用Vue的时候通常会用到第三方的类库,比如 ElementUI ,通常会先在 main.js 中 import,然后再使用 Vue.use() 注册类库,之后就可以正常使用了。这个时候我们会有个疑问,这个 Vue.use 到底做了什么?为什么经过它之后就能正常使用了?

通过 Vue.use() 注册的我们称为 插件,插件内部向外暴露install 方法。当我们使用 Vue.use(插件) 时,实际上是执行了插件内部的 install 方法。

install 方法内部我们可以做如下操作:

  1. 添加全局方法或者属性
  2. 添加全局的指令
  3. 添加全局的 mixins
  4. 添加实例方法,挂载到 Vue.prototype
  5. 一个类库,提供API,如:ElementUI

下面我们往 Vue.prototype 挂载一个实例方法做个示例:

  1. src 目录下新建 global 目录,并新建一个 index.js ,内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const AV = require('leancloud-storage')

    export default {
    install (Vue) {
    const defaultUserId = '5d11ca57eaa375007438fb50000'

    //添加实例方法 $isAdmin()
    Vue.prototype.$isAdmin = () => {
    const current = AV.User.current()
    return current.id === defaultUserId
    }
    }
    }
  2. main.js 引入后就可以在任何地方通过 this 来访问 $isAdmin()

    1
    2
    3
    import global from './global'

    Vue.use(global)

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 路径src/core/global-api/use.js

/* @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
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
}
}

这里通过源码可以看到 initUse 这个方法,传入的插件对象如果存在就不会再次引入,保持只有一个实例存在。如果不存在,则执行 插件中的 install 方法进行安装及初始化。

文章作者: 惆怅客
文章链接: https://www.songhailong.com/articles/a8309a99/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 惆怅客

评论