vue中keep-alive的作用

1、什么是keep-alive?

keep-alive是Vue提供给我们的一个内置组件，会缓存不活动的组件实例，而不是销毁它们。作为标签使用包裹这需要缓存的组件。

2、作用

在组件切换过程中，把切换出的组件保存在内存中，防止重新渲染DOM，减少加载时间及性能消耗，提高用户体验。避免左慈重复渲染降低性能

3、使用场景

例：列表页面进入详情页面，我们想保存列表滚动的位置，就可以使用keep-alive保存列表页面的滚动位置。

4、基本使用

使用keep-alive以后会新增两个生命周期：

1. activated：组件激活时使用
2. deactivated：组件离开时调用

**两个参数：**允许组件有条件的进行缓存

1. include：包裹的组件名会被缓存
2. exclude：包裹的组件名不会被缓存

4.1、所有组件都缓存

使用keep-alive标签将路由出口包裹

    <keep-alive>
      <router-view/>
    </keep-alive>

4.2、include：只有包裹的组件名被缓存

    <keep-alive include="keepAlive,VModel">
      <router-view/>
    </keep-alive>

4.3、exclude：只有包裹的组件名不会被缓存

    <keep-alive exclude="keepAlive,VModel">
      <router-view/>
    </keep-alive>

4.4、max：组件最多缓存的数量

    <keep-alive  max="2">
      <router-view/>
    </keep-alive>

4.5、结合路由router，缓存部分组件

//路由文件中
{
        path: '/keepAlive',
        name: 'keepAlive',
        component: () => import( '../components/keepAlive/keepAlive.vue'),
        meta: {
            keepAlive: true
        }

//路由出口

    <keep-alive>
    //被缓存的组件
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    
    //不需要缓存的组件
    <router-view v-if="!$route.meta.keepAlive"/>

5、新增的两个生命周期

keep-alive缓存了组件，beforeDestroy这个生命周期钩子函数还会执行么?

不会。准确的说是不会直接调用。

在默认情况下，没有使用keep-alive缓存组件，离开当前路由时，会直接调用beforeDestroy和destoyed来销毁。

当使用keep-alive缓存组件，不会直接调用这个销毁周期函数，而是新增了两个钩子函数，activated和deactivated，当退出当前组件时，会执行deactivated这个钩子函数

<template>
  <div class="keepAlive">
    <h1>{{ msg }}</h1>
    <input type="text"/>
    <button @click="$router.push('/VModel')">点击跳转到v-model的学习界面</button>
  </div>
</template>

<script>
export default {
  name: "keepAlive",
  data() {
    return {
      msg: "vue中keep-alive的使用学习"
    }
  },
  beforeDestroy() {
    console.log("销毁前,调用么？不会直接调用");
  },
  activated() {
    //进入组件时执行
    console.log("组件激活了");
  },
  deactivated() {
    //离开了被缓存的组件时执行
    console.log("离开了当前组件");
  }
}
</script>