date1220动态组件--- highlight: a11y-light --- ```html 评论列表发布评论

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.global.js"></script>
</head>

<body>
    <div id="box">
        <!-- 动态组件在切换的时候会引起组件的挂载和卸载 -->
        <button @click="cname='List'">评论列表</button>
        <button @click="cname='PublicComments'">发布评论</button>
        <!-- keep-alive 缓存组件   用这个进行缓存数据(组件)，而且动态组件在在切换时就不在挂载和卸载了 -->
        <keep-alive>
             <component :is="cname"></component>
         </keep-alive>
    </div>
    <script>
        let List={
            template:"<div>列表组件</div>",
            created(){
                console.log("list created")
            },
            unmounted(){
                console.log("list unmounted")
            },
            activated(){                     //启用缓存的时候调用
                console.log("list activated")
            },
            deactivated(){                   //停用缓存的时候调用
                console.log("list deactivated")
            }

        }
        let PublicComments={
            template:`<div>发布评论组件
                    <input type='text' />
                </div>`,
           activated(){
                console.log("PublicComments activated")
            },
            deactivated(){
                console.log("PublicComments deactivated")
            },
            created(){
                console.log("PublicComments created")
            },
            unmounted(){
                console.log("PublicComments unmounted")
            }
        }
        Vue.createApp({
            components:{
                List,PublicComments
            },
            data() {
                return {
                    cname:"List" //组件的名字，动态组件就是根据组件的名字来渲染组件
                }
            },
        }).mount("#box")
    </script>
</body>

</html>