What do we know about Vue.use?

When doing vUE development, we must often contact vue.use () method, the official website gives the explanation is: through the global method vue.use () use plug-in; I think it’s more appropriate to think of use as registration. Let’s start with the following common registration scenarios.

import Router from 'vue-router'
Vue.use(Router)

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

import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts
Copy the code

This.$echarts can be accessed from any of the components using this.$echarts. We’ll write a simple example to prove this.

function myVue(title){
  this.title = title
}
myVue.prototype.myUse = 'Add common attributes to the prototype'
const A = new myVue('I'm instance A'.)
const B = new myVue('I'm instance B'.Console. log(a.tip, B.tip, a.myvue, b.myvue,) // I'm instance A I'm instance B Add public properties to the prototype Add public properties to the prototypeCopy the code

Vue. Use () is a Router and Vuex registration method that uses Router and Vuex devices.

  • By global methodVue.use()The use of plug-in
  • Vue.use automatically prevents multiple registrations of the same plug-in
  • It needs to be done before you call new Vue() to start the application
  • Vue.use()The method must pass in at least one argument of type Object or Function. If it is Object, the Object needs to define an install method. If it is Function, the Function is treated as install. inVue.use()Install executes by default. When install executes, the first parameter is Vue and the other parameters areVue.use()Additional parameters passed in at execution time.

Vue.use() is used to use a Router and Vuex, which is essentially an install method. What logic the install method implements internally is up to the business of the plug-in itself.

Source code analysis

First of all, let’s talk about Flow, vue source code for those strange notationVue.use = function (plugin: Function | Object)Flow is the syntax for Flow, facebook’s JavaScript static type checker. JavaScript is a dynamically typed language, and its flexibility is well known, but the side effect of being too flexible is that it’s easy to write code that is so insidious that it doesn’t even look error-free at compile time, but can have all sorts of weird bugs at run time.

Use (); SRC /core/global-api/use.js; Vue. Use ();

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
    }
    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
  }
}
Copy the code

The above source code uses the utility function toArray, which is defined in SRC /shared/util.js

export functiontoArray (list: any, start? : number): Array<any> { start = start || 0let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}
Copy the code

What logic does the source code implement

Vue.use = function (plugin: Function | Object) {in global API defines the use method on the Vue, receives a plugin parameters can be Function also can be the Object, the front and the official rules of Vue. Use () the first parameter on the corresponding type of required.

Installedplugins.indexof (plugin) > -1) {if (installedplugins.indexof (plugin) > -1) {if (installedplugins.indexof (plugin) > -1) {

Const args = toArray(arguments, 1) arguments is a class array for vue.use (). The toArray method intercepts the first Array argument from subscript 1 to the end. This takes the other arguments to the vue.use () method besides the first one, which are passed in when the instll method is called.

If (typeof plugin. Install === ‘function’) {} else if (typeof plugin === ‘function’) Object or Function?

Plugin.install. apply(plugin, args) plugin.apply(null, args) plugin.apply(null, args) And pass in the remaining parameters from toArray.

Installedplugins.push (plugin) finally records that the component is registered

Now we find thatVue.use()The install register is essentially an install method, and the contents of install are defined by the developer. In general terms, a hook might be more semantic.

What does vue.use () do

We can get Vue in install, so we can consider all the surrounding work related to Vue in vue.use () method, such as:

  • Directive registered
  • Mixins registered
  • Filters to register
  • The components registered
  • The prototype mount
  • .

Echarts are registered with vue.use ()

main.js

import Vue from 'vue'
import echarts from './echarts.js'
Vue.use(echarts)

new Vue({
  ...
})
Copy the code

echarts.js

import Echarts from 'echarts'
export default {
  install(Vue){
    Vue.prototype.$echarts = Echarts
  }
}
Copy the code

The advantage of this is that you can do more configuration related work in the install file, and main.js does not become bloated, making it easier to manage.

Global components are registered with vue.use ()

base.js

import a from './a'
import b from './b'
let components = { a, b }
const installBase = {
  install (Vue) {
    Object.keys(components).map(key => Vue.component(key, components[key]))
  }
}
Copy the code

main.js

import Vue from 'vue'
import base from './base.js'
Vue.use(base)

new Vue({
  ...
})
Copy the code