1. Introduction

Recently, when writing the bottom layer of the front-end project, we found that when importing other UI libraries, we would execute vue.use() for mounting, such as all import ANTD, Element UI library

//antd
import Vue from 'vue';
import Antd from 'ant-design-vue';
Vue.use(Antd);

//element
import Vue from 'vue';
import ElementUI from 'element-ui';;
Vue.use(ElementUI);
Copy the code

We can then reference all of their internal components globally

2. Vue. use Indicates the use of vUE

The use method is used to use the functionality of plug-ins, which add global functionality to a VUE, as shown in the plugin chapter of the vUE documentation:

  1. Add global methods and properties
  2. Add global resources such as global components, global filters, and global directives
  3. Add some component options globally to blend in
  4. Add vue instance method, vue.prototype.$const

When we are developing a plug-in, you need to use the use method for registration, code for Vue. Use (myPlugin), of which the myPlugin can be function | object, the object will need to provide a install method, we write our own plug-in code is as follows

Plugins.js export default (Vue)=>{Vue. MyGlobalMethod = function(){} Bind :function(){}}) // Vue. Mixin ({create:function(){}}) // Vue. Prototype.$const = function(){}} //2. Import plugins from './plugins.js vue.use (plugins) //3. Support chain calls vue.use (router).use(plugins)Copy the code

On second thought, we could have written this code directly in the entry file

Prototype.$const = function(){} new Vue() {} new Vue();Copy the code

It is true that we can do this without using the use method, but if your project is very large, the main.js file can become very bloated and unreadable, and this is the era of modular development; But it also gives us a hint to think about the use source code: 1. Execute functions inside the plugin directly, 2. Returns the Vue constructor; Use also has a function that plug-ins are registered only once and then not registered. In order to clarify the principle, we go to the vue source code in the use implementation to explain

3. Vue. Use the source code

Use source code:

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

A line of code parses what the code does

Vue.use = function (plugin: Function | Object) {/ / to add a Vue constructor to install plugin attributes, Used to record the installation of the plug-in const installedPlugins = (enclosing _installedPlugins | | (enclosing _installedPlugins = [])) / / if the plug-in has been around for, If (installedplugins.indexof (plugin) > -1) {return this} const args = toArray(arguments, 1) // Add the Vue constructor args.unshift(this) to the first place If (typeof plugin.install === 'function') {plugin.install.apply(plugin, plugin); args) } else if (typeof plugin === 'function') { plugin.apply(null, Installedplugins.push (plugin) // Return Vue constructor to facilitate chain call return this}Copy the code

The above is vue. Use of all the source code, relatively short, the internal ideas we can learn to apply. Attached source code address: github.com/vuejs/vue/b…