In fact, the use and functionality of the plug-in has been explained in detail in the Vue documentation, which is repeated here and supplemented with a few examples.

What plug-ins do

Plug-ins are usually used to add global functionality to a Vue. There are no hard and fast limits to what a plug-in can do — there are usually:

  1. Add global methods or properties. Such as: the vue – custom – element

  2. Add global resources: directives/filters/transitions, etc. Such as the vue – touch

  3. Add some component options through global blending. Such as the vue – the router

  4. Add Vue instance methods by adding them to Vue. Prototype.

  5. A library that provides its own API and provides one or more of the functions mentioned above. Such as the vue – the router

As you can see, the main purpose of the plugin is to help us implement some of the “global functions” of VUE, such as global directives, filters, components, methods or properties injected into prototype objects.

Use of plug-ins

Use the plug-in with the global method vue.use (). It needs to be done before you call new Vue() to start the application:

/ / call ` MyPlugin. Install ` (Vue)
Vue.use(MyPlugin)

new Vue({
  / /... Component options
})
Copy the code

An optional option object can also be passed:

Vue.use(MyPlugin, { someOption: true })
Copy the code

Vue.use automatically prevents multiple registrations of the same plug-in, and the plug-in will only be registered once even after multiple calls.

How plug-ins are registered

Now that we understand how plug-ins are used, we can look at how plug-ins are registered, including how to automatically invoke the install method, pass plug-in options, and prevent duplicate registrations.

/** * Convert an Array-like object to a real Array. */
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
}
Copy the code
import { toArray } from '.. /util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // Prevent duplicate registrations based on the registration list
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // Additional Parameters remove the first parameter
    const args = toArray(arguments.1)

    // call the caller this === Vue
    args.unshift(this)

    / / compatible
    if (typeof plugin.install === 'function') {
      // The plugin option is passed with Vue as the first argument
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // Cache the registration list
    installedPlugins.push(plugin)
    return this}}Copy the code

The source code for the use method is very simple, and we can clearly explain the above question from the comments of the function.

Developing a plug-in

In fact, the development of the plug-in is to use the Vue function passed in the use method, using vue.directive Vue.component and other global methods to achieve our function.

MyPlugin.install = function (Vue, options) {
  // 1. Add a global method or property
  Vue.myGlobalMethod = function () {
    / / logic...
  }

  // 2. Add global resources
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      / / logic...}... })// 3. Inject component options
  Vue.mixin({
    created: function () {
      / / logic...}... })// 4. Add instance methods
  Vue.prototype.$myMethod = function (methodOptions) {
    / / logic...}}Copy the code

Maybe you and I have the same doubts, why need to use the use call plug-in to complete registration and realize the function, besides use can also call the static method of Vue to realize the function we need? The answer is yes, but I think the purpose of defining plug-ins in Vue is to better encapsulate and decouple the plug-in code from the business code, and define a unified plug-in installation and registration specification. Standardization makes calling simpler and more unified.

Plug-in development examples

There are many examples of plug-in development on the Internet. Here is a loading plug-in implemented by others.

Start by creating the UI as a component

<template> <div class="container" v-show="show"> <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </template> <script> export default { data () { return { show: false }; }}; </script> <style lang="less" scoped> .container { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; span { display: inline-block; width: 8px; height: 80px; background: rgb(255, 107, 186); border-radius: 4px; Animation: Load 1.6s ease Infinite; } @keyframes load { 0%, 100% { height: 80px; background: rgb(255, 107, 186); } 50% { height: 20px; margin-top: 60px; background: rgb(245, 15, 53); }} span:nth-child(2) {animation-delay: 0.2s; } span:nth-child(3) {animation-delay: 0.4s; } span:nth-child(4) {animation-delay: 0.6s; } span:nth-child(5) {animation-delay: 0.8s; } } </style>Copy the code

Write plug-in functions

import LoadingComponent from './loading.vue';

// Component instance
let $vm;

const MyPlugin = {
  install (Vue) {
    if(! $vm) {// Subclass extend and mount the node
      const TemplateConstructor = Vue.extend(LoadingComponent);
      $vm = new TemplateConstructor().$mount(document.createElement('div'));
      
      document.body.appendChild($vm.$el);
    }

    $vm.show = false;
    
    // This is actually a closure application
    const loading = {
      show () {
        $vm.show = true;
      },
      hide () {
        $vm.show = false; }};// Mount this call to the prototype object implementation vue instanceVue.prototype.$loading = loading; }};export default MyPlugin;
Copy the code

To register the plugin

import MyPlugin from './loading'

Vue.use(MyPlugin);
Copy the code

Used in vUE instances

mounted() {
  this.$loading.show();
}
Copy the code

conclusion

The reason for learning vue. use is that I did not answer the interviewer’s question about the principle of vue. use when I was interviewed before. In fact, if I had gone to understand it, I could understand the principle is very simple. Who let oneself did not go to understand it, had to mute eat coptis. Why don’t you ask me next time?

reference

  • Vue plug-in

  • Vue- Plug-in development

  • CSS3 implements 18 Loading effects

Welcome to the front-end birds to learn and communicate ~ 516913974