Vue插件实现过程中遇到的问题总结

场景介绍

最近做H5遇到了一个场景：每个页面需要展示一个带有标题的头部。一个实现思路是使用全局组件。假设我们创建一个名为TheHeader.vue的全局组件，伪代码如下：

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

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

创建好全局组件后，在每个页面组件中引用该组件并传入props中即可。例如我们在页面A中引用该组件，页面A对应的组件是A.vue

<template>
    <div>
        <TheHeader :title="title" />
    </div>
</template>
<script>
    export default {
        data() {
            title: ''
        },
        created(){
            this.title = '我的主页'
        }
    }
</script>

使用起来非常简单，不过有一点美中不足：如果头部组件需要传入的props很多，那么在页面组件中维护对应的props就会比较繁琐。针对这种情况，有一个更好的思路来实现这个场景，就是使用Vue插件。

同样是在A.vue组件调用头部组件，使用Vue插件的调用方式会更加简洁：

<template>
    <div />
</template>
<script>
    export default {
        created(){
            this.$setHeader('我的主页')
        }
    }
</script>

我们看到，使用Vue插件来实现，不需要在A.vue中显式地放入TheHeader组件，也不需要在A.vue的data函数中放入对应的props，只需要调用一个函数即可。那么，这个插件是怎么实现的呢？

插件实现

它的实现具体实现步骤如下：

创建一个SFC（single file component），这里就是TheHeader组件
创建一个plugin.js文件，引入SFC，通过Vue.extend方法扩展获取一个新的Vue构造函数并实例化。
实例化并通过函数调用更新Vue组件实例。

按照上面的步骤，我们来创建一个plugin.js文件：

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)

我们随后在main.js中引入plugin.js，就完成了插件实现的全部逻辑过程。不过，尽管这个插件已经实现了，但是有不少问题。

问题一、重复的头部组件

如果我们在单页面组件中使用，只要使用router.push方法之后，我们就会发现一个神奇的问题：在新的页面出现了两个头部组件。如果我们再跳几次，头部组件的数量也会随之增加。这是因为，我们在每个页面都调用了这个方法，因此每个页面都在文档中放入了对应DOM。

考虑到这点，我们需要对上面的组件进行优化，我们把实例化的过程放到插件外面：

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)

这样处理，虽然还是会重复在文档中插入DOM。不过，由于是同一个vue实例，对应的DOM没有发生改变，所以插入的DOM始终只有一个。这样，我们就解决了展示多个头部组件的问题。为了不重复执行插入DOM的操作，我们还可以做一个优化：

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)

增加一个变量来控制是否已经插入了DOM，如果已经插入了，就不再执行插入的操作。优化以后，这个插件的实现就差不多了。不过，个人在实现过程中有几个问题，这里也一并记录一下。

问题二、另一种实现思路

在实现过程中突发奇想，是不是可以直接修改TheHeader组件的data函数来实现这个组件呢？看下面的代码：

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)

看上去也没什么问题。不过实践后发现，调用$setHeader方法，只有第一次传入的值会生效。例如第一次传入的是'我的主页'，第二次传入的是'个人信息'，那么头部组件将始终展示我的主页，而不会展示个人信息。原因是什么呢？

深入Vue源码后发现，在第一次调用new Vue以后，Header多了一个Ctor属性，这个属性缓存了Header组件对应的构造函数。后续调用new Vue(TheHeader)时，使用的构造函数始终都是第一次缓存的，因此title的值也不会发生变化。Vue源码对应的代码如下：

Vue.extend = function (extendOptions) {
    extendOptions = extendOptions || {};
    var Super = this;
    var SuperId = Super.cid;
    var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}); 
    if (cachedCtors[SuperId]) { // 如果有缓存，直接返回缓存的构造函数
      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; // 这里就是缓存Ctor构造函数的地方
    return Sub
  }

找到了原因，我们会发现这种方式也是可以的，我们只需要在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)

每次执行$setHeader方法时，我们都将缓存的构造函数去掉即可。

问题三、是否可以不使用Vue.extend

实测其实不使用Vue.extend，直接使用Vue也是可行的，相关代码如下：

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)

直接使用Vue来创建实例相较extend创建实例来说，不会在Header.vue中缓存Ctor属性，相较来说是一个更好的办法。但是之前有看过Vant实现Toast组件，基本上是使用Vue.extend方法而没有直接使用Vue，这是为什么呢？

频道导航