keep-alive

什么是keep-alive？

<keep-alive>组件的缓存，如果当期组件需要进行缓存的情况下，我们需要将当前的组件外部加一个<keep-alive>;是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive生命周期钩子函数：activated、deactivated

activated：活跃状态，当前组件是一个显示的状态

deactivated：缓存状态，如果组件进行了切换，那么当前组件就会保存在缓存当中

使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

有哪两个属性？

include：包含包含哪些组件可以进入缓存状态

扫描二维码关注公众号，回复： 4148167 查看本文章

exclude：排除排除哪些组件可以进入缓存状态

使用的注意事项？

1、尽量配合component使用

2、router-view 也可以进行使用，但是exclude ，include不会生效

代码：

home.vue

<template>
<div>
    <keep-alive include="One-com">
        <component :is = "comName"></component>
    </keep-alive>
    <button @click="handleToggle(1)">one</button>
    <button @click="handleToggle(2)">two</button>
</div>
</template>
<script>
import One from "./one";
import Two from "./two";

export default {
    components:{
        "One-com":One,
        "Two-com":Two
    },
    data(){
        return{
            comName:"One-com"
        }
    },
    methods:{
        handleToggle(val){
            switch(val){
                case 1:
                    this.comName = "One-com";
                    break;
                case 2:
                    this.comName = "Two-com";
                    break;
            }
        }
    }
}
</script>

one.vue

<template>
    <div>one</div>
</template>
<script>
export default {
    beforeCreate() {
        console.log("beforeCreate----one")
    },
    created() {
        console.log("created----one")
    },
    beforeMount() {
        console.log("beforeMount----one")
    },
    mounted() {
        console.log("mounted----one")
    },
    beforeUpdate() {
        console.log("beforeUpdate----one")
    },
    updated() {
        console.log("updated----one")
    },
    activated() {
        console.log("活跃----one")
    },
    deactivated() {
        console.log("缓存----one")
    },
    beforeDestroy() {
        console.log("beforeDestroy----one")
    },
    destroyed() {
        console.log("destroyed----one")
    }
}
</script>

two.vue

<template>
    <div>two</div>
</template>
<script>
export default {
    beforeCreate() {
        console.log("beforeCreate----two")
    },
    created() {
        console.log("created----two")
    },
    beforeMount() {
        console.log("beforeMount----two")
    },
    mounted() {
        console.log("mounted----two")
    },
    beforeUpdate() {
        console.log("beforeUpdate----two")
    },
    updated() {
        console.log("updated----two")
    },
    activated() {
        console.log("活跃----two")
    },
    deactivated() {
        console.log("缓存----two")
    },
    beforeDestroy() {
        console.log("beforeDestroy----two")
    },
    destroyed() {
        console.log("destroyed----two")
    }
}
</script>

猜你喜欢