Summary of problems encountered in the implementation of Vue plug-ins

Scene Introduction
Plugin Implementation
Problem 1: Duplicate header components
Question 2: Another Implementation Idea
Question 3: Is it possible not to use Vue.extend?
Summarize

Scene Introduction

I recently encountered a scenario when working on H5: each page needs to display a header with a title. One implementation idea is to use global components. Suppose we create a global component called TheHeader.vue, the pseudo code is as follows:

<template>
    <h2>{{ title }}</h2>
</template>

<script>
export default {
props: {
    title:
        type: String,
        default: ''
    }
}
}
</script>

After creating the global component, reference it in each page component and pass it into props. For example, if we reference this component in page A, the component corresponding to page A is A.vue

<template>
    <div>
        <TheHeader :title="title" />
    </div>
</template>
<script>
    export default {
        data() {
            title: ''
        },
        created(){
            this.title = 'My Homepage'
        }
    }
</script>

It is very simple to use, but there is one drawback: if the header component needs to pass in a lot of props, it will be cumbersome to maintain the corresponding props in the page component. In this case, there is a better idea to implement this scenario, which is to use the Vue plug-in.

The same method of calling the head component in the A.vue component is more concise when using the Vue plug-in:

<template>
    <div />
</template>
<script>
    export default {
        created(){
            this.$setHeader('My Homepage')
        }
    }
</script>

We can see that when using the Vue plug-in to implement it, there is no need to explicitly put the TheHeader component in A.vue, nor is there any need to put the corresponding props in the data function of A.vue. You only need to call a function. So, how does this plugin work?

Plugin Implementation

The specific steps for its implementation are as follows:

Create an SFC (single file component), here is the Header component
Create a plugin.js file, introduce SFC, and use the Vue.extend method to get a new Vue constructor and instantiate it.
Instantiate and update a Vue component instance via a function call.

Following the above steps, let's create a plugin.js file:

import TheHeader from './TheHeader.vue'
import Vue from 'vue'

const headerPlugin = {
    install(Vue) {
        const vueInstance = new (Vue.extend(TheHeader))().$mount()
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = title
            document.body.prepend(vueInstance.$el)
            
        }
    }
}
Vue.use(headerPlugin)

We then introduce plugin.js into main.js to complete the entire logical process of plugin implementation. However, although this plugin has been implemented, there are quite a few problems.

Problem 1: Duplicate header components

If we use it in a single-page component, as long as we use the router.push method, we will find a magical problem: two header components appear on the new page. If we jump a few more times, the number of head components will also increase. This is because we call this method on each page, so each page puts the corresponding DOM into the document.

Taking this into account, we need to optimize the above components. We put the instantiation process outside the plugin:

import TheHeader from './TheHeader.vue'
import Vue from 'vue'

const vueInstance = new (Vue.extend(TheHeader))().$mount()
const headerPlugin = {
    install(Vue) {
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = title
            document.body.prepend(vueInstance.$el)
            
        }
    }
}
Vue.use(headerPlugin)

This process will still repeatedly insert the DOM into the document. However, since it is the same vue instance, the corresponding DOM has not changed, so there is always only one inserted DOM. In this way, we have solved the problem of displaying multiple header components. In order to avoid repeating the operation of inserting into the DOM, we can also make an optimization:

import TheHeader from './TheHeader.vue'
import Vue from 'vue'

const vueInstance = new (Vue.extend(TheHeader))().$mount()
const hasPrepend = false
const headerPlugin = {
    install(Vue) {
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = title
            if (!hasPrepend) {
                document.body.prepend(vueInstance.$el)
                hasPrepend = true
            }
            
        }
    }
}
Vue.use(headerPlugin)

Add a variable to control whether the DOM has been inserted. If it has been inserted, the insertion operation will not be performed. After optimization, the implementation of this plugin is almost done. However, I encountered several problems during the implementation process, which I will record here.

Question 2: Another Implementation Idea

During the implementation process, I suddenly had an idea: Can I directly modify the data function of the TheHeader component to implement this component? Look at the following code:

import TheHeader from './TheHeader.vue'
import Vue from 'vue'

let el = null
const headerPlugin = {
    install(Vue) {
        Vue.prototype.$setHeader = function(title) {
            TheHeader.data = function() {
                title
            }
            const vueInstance = new (Vue.extend(TheHeader))().$mount()
            el = vueInstance.$el
            if (el) {
                document.body.removeChild(el)
                document.body.prepend(el)
            }
            
        }
    }
}
Vue.use(headerPlugin)

It doesn't look like there's anything wrong with it. However, after practice, it was found that when calling the $setHeader method, only the first value passed in will take effect. For example, if the first input is 'my homepage' and the second input is 'personal information', then the header component will always display my homepage instead of personal information. What is the reason?

After going deep into the Vue source code, it was found that after the first call to new Vue, Header had an additional Ctor property, which cached the constructor corresponding to the Header component. When new Vue(TheHeader) is called subsequently, the constructor used is always the first cache, so the value of title will not change. The code corresponding to the Vue source code is as follows:

Vue.extend = function (extendOptions) {
    extendOptions = extendOptions || {};
    var Super = this;
    var SuperId = Super.cid;
    var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}); 
    if (cachedCtors[SuperId]) { // If there is a cache, return the cached constructor directly return cachedCtors[SuperId]
    }

    var name = extendOptions.name || Super.options.name;
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name);
    }

    var Sub = function VueComponent (options) {
      this._init(options);
    };
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    Sub.cid = cid++;
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    );
    Sub['super'] = Super;

    // For props and computed properties, we define the proxy getters on
    // the Vue instances at extension time, on the extended prototype. This
    // avoids Object.defineProperty calls for each instance created.
    if (Sub.options.props) {
      initProps$1(Sub);
    }
    if (Sub.options.computed) {
      initComputed$1(Sub);
    }

    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend;
    Sub.mixin = Super.mixin;
    Sub.use = Super.use;

    // create asset registers, so extended classes
    // can have their private assets too.
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type];
    });
    // enable recursive self-lookup
    if (name) {
      Sub.options.components[name] = Sub;
    }

    // keep a reference to the super options at extension time.
    // later at instantiation we can check if Super's options have
    // been updated.
    Sub.superOptions = Super.options;
    Sub.extendOptions = extendOptions;
    Sub.sealedOptions = extend({}, Sub.options);

    // cache constructor
    cachedCtors[SuperId] = Sub; // This is where the Ctor constructor is cached return Sub
  }

After finding the reason, we will find that this method is also possible. We only need to add a line of code in plugin.js

import TheHeader from './TheHeader.vue'
import Vue from 'vue'

let el = null
const headerPlugin = {
    install(Vue) {
        Vue.prototype.$setHeader = function(title) {
            TheHeader.data = function() {
                title
            }
            TheHeader.Ctor = {}
            const vueInstance = new Vue(TheHeader).$mount()
            el = vueInstance.$el
            if (el) {
                document.body.removeChild(el)
                document.body.prepend(el)
            }
            
        }
    }
}
Vue.use(headerPlugin)

Each time we execute the $setHeader method, we just remove the cached constructor.

Question 3: Is it possible not to use Vue.extend?

In fact, it is feasible to use Vue directly without using Vue.extend. The relevant code is as follows:

import TheHeader from './TheHeader.vue'
import Vue from 'vue'

const vueInstance = new Vue(TheHeader).$mount()
const hasPrepend = false
const headerPlugin = {
    install(Vue) {
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = title
            if (!hasPrepend) {
                document.body.prepend(vueInstance.$el)
                hasPrepend = true
            }
            
        }
    }
}
Vue.use(headerPlugin)

Using Vue directly to create an instance is a better way than using extend to create an instance because it will not cache the Ctor property in Header.vue. But I have seen Vant implement the Toast component before, which basically uses the Vue.extend method instead of directly using Vue. Why is that?

Summarize

This is the end of this article about the problems encountered in the implementation of Vue plug-ins. For more relevant Vue plug-in implementation problems, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of writing and using Vue plugins (with demo)
Vue right-click menu plugin is simple, extensible, and customizable right-click menu
Usage of vue custom global components (custom plug-ins)
Vue3.0 implements plugin encapsulation
Detailed explanation of Vue.js plugin development
Install the plugin in the Vue project and save

<<: IIS configuration of win server 2019 server and simple publishing of website

>>: Solution to the problem of data loss when using Replace operation in MySQL