vue常见的keep-alive问题

一、什么是keep-alive？

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

二、keep-alive的优点？

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

三、keep-alive有三属性

include - 字符串或正则表达，只有匹配的组件会被缓存
max-数字，最多可以缓存多少组件实例
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

代码

<keep-alive include="home">
   <router-view />
</keep-alive>
//这串代码表示home组件会被缓存，而其他路由没配置就不会被缓存

四、keep-alive的使用会触发两个生命周期函数?

• activated 在keep-alive组件激活之前也就是当显示组件时触发
• deactivated 在keep-alive组件激活之后当隐藏缓存组件时触发

五、使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

使用 <keep-alive>

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

六、缓存后如何获取数据

解决方案可以有以下两种：

• beforeRouteEnter
• activated

beforeRouteEnter

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

activated

在keep-alive缓存的组件被激活的时候，都会执行activated钩子

activated(){
   this.getData() // 获取数据
},

注意：服务器端渲染期间acvtived不被调用。