你肯定不知道：Vue组件的动态加载、销毁

        组件的动态加载还是比较容易的，使用即可，但是，加载并注册后，动态销毁则有难度！目前，相关文献很少，难倒无数Vue开发者。不过，如果巧妙使用vnode，就能轻松实现！

       下图展示了4个代表不同文档材料的Vue组件。为简化起见，每个组件用一个DIV元素表示，其内容为一张图片。只要双击某个图片，即可卸载该图片对应的Vue组件！

组件被删除前 

组件被删除后

1 编写html文件

2 编写js/uninstall.js

        组件的销毁，关键点是需要做两件事情：（1）从页面元素集合中移除当前待删除元素；（2）删除当前Vue实例中的对应组件。

import {defineAsyncComponent, defineComponent, getCurrentInstance, h} from 'vue'

export const AuthorDocs = defineComponent({
    setup() {
        const docs = [ //组件的id及图片内容
            {id: 'computerApp', image: 'image/computerapp.jpg'},
            {id: 'computerGc', image: 'image/computergc.jpg'},
            {id: 'rcp', image: 'image/rcp.jpg'},
            {id: 'spring', image: 'image/spring.png'}
        ]

        const instance = getCurrentInstance()     //应用实例
        const app = instance.appContext.app       //应用相关数据
        docs.forEach(({id, image}) =>
            app.component(id, h(asyncComponent, { //h函数渲染
                instance: instance, //当前Vue应用实例
                id: id,             //组件的id号
                image: image        //组件图片URL
            }))
        )
        return {docs}
    },
    template: `
             

                       
             
             `
})

const asyncComponent = defineAsyncComponent( //异步组件
    () => Promise.resolve({
        props: {
            instance: Object,
            id: String,
            image: String
        },
        setup({instance, id, image}) {
            const delDocs = (id) => {
                const vnode = instance.vnode       //获取虚拟元素结点
                const children = vnode.el.children //获得元素集合：div层
                const appComponents = vnode.appContext.components //拿到组件集合
                Object.keys(appComponents)
                    //过滤出computerApp、computerGc、rcp、spring这4个组件
                    //注意：__v_isVNode是两个“_”，再加上“v_isVNode”
                    .filter(key => appComponents[key].__v_isVNode) 
                    .forEach((key, index) => {
                        if (key === id) {             //是当前双击的组件
                            children[index].remove()  //移除当前div层元素
                            //删除当前Vue应用中，组件集合中的对应组件
                            delete appComponents[key]
                        }
                    })
            }
            return {id, image, delDocs}
        },
        template: `
                

                              
                
                `
    })
)

        这么优雅的销毁Vue组件，知道的人，极少！