Vue--keep-alive--详解

原文网址：Vue--keep-alive--详解_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍Vue中的keep-alive。

        keep-alive标签主要用于保留组件状态或避免重新渲染。

使用场景

        使用路由跳转（router-link或者this.$router.push()）加载组件时，一般每次组件都会再次加载，如果组件内有请求也会再次去请求数据，就会造成不必要的请求，影响用户体验。

        keep-alive可以缓存组件以及其中的数据，使再次跳转该路由时其中的组件和数据不会再次请求，大大的提高的页面体验。

官网网址

API — Vue.js

相关网址

Vue--keep-alive--使用/实例_IT利刃出鞘的博客-CSDN博客

keep-alive介绍

概述

概述

        keep-alive标签和 transition标签相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

        keep-alive标签内的组件会比普通组件多出两个生命周期钩子函数：activated（激活时触发） 和 deactivated（失活时触发）。

        在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 keep-alive标签的所有嵌套组件中触发。

 Props

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

示例1

<keep-alive :include="['home']">
    <router-view/>
keep-alive>

示例2 

<template>
    <keep-alive :include="cachedViews" :exclude="unCachedViews" :max="10">
        <router-view/>
    keep-alive>
template>
 
<script>
import LifeCycle from '../mixins/LifeCycle'
 
export default {
  name: 'CompA',
  computed: {
    cachedViews () {
      return this.$store.state.cachedViews.cachedViews
    },
    cachedViews () {
      return this.$store.state.cachedViews.uncachedViews
    }
 }
}
script>

老式的写法

        Vue比较老的版本里，keep-alive没有include和exclude选项。那么，如果想缓存某个组件，不缓存某个组件，可以像下边这么写：

路由配置（router/index.js）

{
    path: '/compA',
    name: 'CompA',
    component: CompA,
    meta: {
        keepAlive: true, //此组件需要被缓存
    }
},
{
    path: '/compB',
    name: 'CompB',
    component: CompB,
    meta: {
        keepAlive: false, //此组件不需要被缓存
    }
},

组件

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        
    router-view>
keep-alive>
 
<router-view v-if="!$route.meta.keepAlive">
    
router-view>

注意

        这样写有bug，比如：无法使用transition标签（动效）；缓存了不必要的、用来实现嵌套路由操作的router-view布局组件等。

        现在我们没有理由用这种写法了，要用include、exclude写法。

案例1：缓存动态组件

见：Vue--keep-alive--使用/实例_IT利刃出鞘的博客-CSDN博客

案例2：缓存路由

见：Vue--keep-alive--使用/实例_IT利刃出鞘的博客-CSDN博客

案例3：缓存动态路由

        动态路由的参数改变后，还是加载以前的页面，created中的数据请求不执行。

方案1：在watch中监听$route

        如果监听到 route 参数变了就重新请求数据（created 中的函数）

方案2：keep-alive + activated

        如果有keep-alive，就在activated中请求后端数据。这样的话，相同的路由再次进入时不重新渲染，路由参数不同的时候就重新请求数据和渲染。