什么是keep-alive?
<keep-alive>组件的缓存,如果当期组件需要进行缓存的情况下,我们需要将当前的组件外部加一个<keep-alive>;是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中;包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive生命周期钩子函数:activated、deactivated
activated:活跃状态,当前组件是一个显示的状态
deactivated:缓存状态,如果组件进行了切换,那么当前组件就会保存在缓存当中
使用<keep-alive>
会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated
阶段获取数据,承担原来created钩子中获取数据的任务。
有哪两个属性?
include:包含 包含哪些组件可以进入缓存状态
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>