美文网首页
Vue_key-alive缓存切换

Vue_key-alive缓存切换

作者: Christoles | 来源:发表于2019-04-12 20:34 被阅读0次

    1. 为什么要用 key-alive?

    Vue缓存 避免反复重渲染导致的性能问题

    2. 什么是 key-alive?

    <keep-alive>

    • 包裹动态组件时,会 缓存 不活动的组件实例,而 不是销毁 它们。
    • 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
    • 当组件在 <keep-alive> 内被切换,它的 activateddeactivated 这两个 生命周期钩子函数 将会被对应执行。

    3. key-alive切换效果:

    image.png image.png

    3. key-alive切换实例代码:

    <div id="app">
        <button @click="isRender">点我切换</button>
        <keep-alive>
            <component :is="arr[isRend==true?0:1]"></component>
            <!--坑~is记得加上:冒号-->
        </keep-alive>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var test1 = {
            template:"<div>我是另外一个局部组件111</div>"
        }
        var test = {
            template:"<div>我是一个局部组件000</div>",
            activated(){
                console.log(111,"我包裹在了keep-alive标签中")
            },
            deactivated(){
                console.log(222,"隐藏包裹在keep-alive标签中组件的时候被触发")
            }
        }
        var vm = new Vue({
            el:"#app",
            components:{
                test,
                test1
            },
            data:{
                isRend:true,
                arr:[test,test1]
            },
            methods:{
                isRender(){
                    this.isRend = !this.isRend;
                }
            }
        })
    </script>
    

    相关文章

      网友评论

          本文标题:Vue_key-alive缓存切换

          本文链接:https://www.haomeiwen.com/subject/duvhwqtx.html