vue中，全局loading没有效果

Question

写了一个全局loading

let Loading = {}
// 避免重复install，设立flag
Loading.installed = false
Loading.install = function (Vue) {
    if (Loading.installed) return
    Vue.prototype.$loading = {}
    Vue.prototype.$loading.show = () => {
        // 如果页面有loading则不继续执行
        if (document.querySelector('#vip-loading')) return
        // 1、创建构造器，定义loading模板
        let LoadingTip = Vue.extend({
            template: `<div id="vip-loading">
                            <div class="loading"></div>
                       </div>`
        })
        // 2、创建实例，挂载到文档以后的地方
        let tpl = new LoadingTip().$mount().$el
        // 3、把创建的实例添加到body中
        document.body.appendChild(tpl)
        Loading.installed = true
    }
    Vue.prototype.$loading.hide = () => {
        let tpl = document.querySelector('#vip-loading')
        document.body.removeChild(tpl)
    }
}
export default Loading

然后使用
Vue.use(loading);

我在组件中这样调用没有效果：
 this.$loading.show();

Answer 1

let tpl = new LoadingTip().$mount().$el
// 这一行什么意思？确定可以运行吗
// 按照我的理解$mount(el)或者
Vue.extend({
    template: `<div id="vip-loading">
            <div class="loading"></div>
       </div>`,
       el
});

Answer 2

试了下第一次是有效果的

后面再调用show 因为installed是true就跳出了, installed控制的应该是插件是否被注册, 但是在main.js实际只会注册一次, 这个变量是多余的

其实不需要每次都插入删除div, install的时候插入dom, 后面控制display就好了