keep-alive组件是什么？
<keep-alive>组件，我称之为缓存组件，当你不希望某一个组件在每次调用时都被初始化，而保存上一次打开时的状态时可以使用该组件来做组件持久化。
怎么用?
先上最简单的案例：
- app.vue
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
一般我都在app.vue中使用可以通过keep-alive和路由守卫搭配使用做到筛选是否需要组件缓存的功能
- route.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path:"/",
name:"home",
component: ()=> import('@/views/home'),
meta:{
keepAlive:true
}
},
{
path:"*",
name:"404",
component: ()=> import('@/views/404'),
meta:{
keepAlive:true
}
},
{
path:"/article",
name:"article",
component: ()=> import('@/views/article'),
meta:{
keepAlive:true
}
},
{
path:"/detail",
name:"detail",
component: ()=> import('@/views/detail'),
meta:{
keepAlive:false
}
}
]
export default new Router({
routes
})
keep-alive组件接收三个参数
可通过这三个参数筛选需要的组件
include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
,优先级大于includemax 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
<keep-alive include="detail,article" exclude="detail" max="2">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
keep-alive组件的生命周期钩子
当某组件被包含在<keep-alive>标签中时切换/关闭（非第一次打开）该组件时将不会触发该组件的生命钩子函数：created,mounted,destroyed..., 将获得两个额外的生命钩子函数：activated、deactivated
- activated: 在组件创建或者被调用时触发，与原钩子优先级：created>mounted>activated
- deactivated: 在组件关闭时触发
export default {
name:"article",
data(){
return{
}
},
created(){
console.log("article创建完毕");
},
mounted(){
console.log("article组件加载完毕");
console.log(this.$route.meta.keepAlive);
},
activated(){
console.log("keep-alive组件加载完毕钩子");
},
deactivated(){
console.log("keep-alive组件退出时钩子");
},
beforeDestroy(){
console.log("组件被销毁之前");
},
destroyed(){
console.log("组件被销毁");
}
}
前方巨坑，请注意！！！！
使用include/exclude时一定要在该组件内加上name属性并且与include/exclude内的名称保持一致，否者会失效
export default {
name:"article",
data(){
return{
}
},
}
