keep-alive

<body style="text-align: center">
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <a href="#" @click="page1='main'">主页</a>
        <a href="#" @click="page1='login'">登录页</a>
        <a href="#" @click="page1='user'">个人页</a>
        <my-com1 v-show="page1=='main'"></my-com1>
        <my-com2 v-show="page1=='login'"></my-com2>
        <my-com3 v-show="page1=='user'"></my-com3>
        <hr> 以下是动态组件写法<hr>
        <a href="#" @click="page2='my-com1'">主页</a>
        <a href="#" @click="page2='my-com2'">登录页</a>
        <a href="#" @click="page2='my-com3'">个人页</a>
        <component :is="page2"></component>
    </div>
    <script>
        Vue.component('myCom1', { template: "<h1>这是主页</h1>" })
        Vue.component('myCom2', { template: "<h1>登陆注册</h1>" })
        Vue.component('myCom3', { template: "<h1>个人中心</h1>" })
        new Vue({
            el: '#myApp',
            data: {
                page1: "main",
                page2: "myCom1"
            },
            methods: {
            }
        })
    </script>
</body>

keep-alive

keep-alive会缓存组件中的数据,当组件重新展示时,渲染缓存的数据
默认情况下, 动态组件切换会伴随组件的创建和销毁, 当动态组件被keepAlive包裹后, 组件只会在第一次显示时创建, 组件切换时,不会再销毁和重建, 也就不会再调用created和destroyed生命周期函数
当添加了keepAlive后, 在组件切换时, 会执行两个新的生命周期函数activated 和 deactivated, 它们依赖于keepAlive

<body style="text-align: center">
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <a href="#" @click="page2='my-com1'">主页</a>
        <a href="#" @click="page2='my-com2'">登录页</a>
        <a href="#" @click="page2='my-com3'">个人页</a>
        <!-- 动态组件切换类似于v-if切换, 会将组件创建和销毁 -->
        <!-- <component :is="page2"></component> -->
        <!-- 而且组件间不存在重用机制, 所以表单中的数据在组件切换时会丢失 -->
        <!-- 如果想在组件切换时保留表单数据, 可以使用keep-alive -->
        <keep-alive>
            <component :is="page2"></component>
        </keep-alive>
    </div>
    <script>
        Vue.component('myCom1', { template: "<h1>这是主页<input></h1>" })
        Vue.component('myCom2', { template: "<h1>登陆注册<input></h1>" })
        Vue.component('myCom3', { 
            template: "<h1>个人中心<input></h1>" ,
            created() {
                console.log("个人中心页被创建")
            },
            destroyed() {
                console.log("个人中心页被销毁")
            },
            activated() {
                console.log("个人中心页进入活跃状态, 即组件显示")
            },
            deactivated() {
                console.log("个人中心页进入非活跃状态, 即组件隐藏")
            }
        })
        new Vue({
            el: '#myApp',
            data: {
                page1: "main",
                page2: "myCom1"
            },
            methods: {
            }
        })
    </script>
</body>

vue动态组件

keep-alive