XiangJv

引言：

   在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的，Vue提供了一个内置组件，<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，

使用：

   当你在当前组件输入完数据之后进入详情，从详情再返回当前组件的时候你不希望这个组件的数据被刷新这个时候也可以用 keep-alive。

   keep-alive 生命周期钩子

      activaed :  keep-alive 组件激活时调用（服务器端渲染期间不被调用）。

      deactivated： keep-alive 组件停用时调用（服务器端渲染期间不被调用）。

   keep-alive 自带属性

      include : 字符串或正则表达式。只有名称匹配的组件会被缓存。

      exclude : 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

      max :  数字。最多可以缓存多少组件实例。

代码：

第一种：

include你想 name 为 a 的组件被缓存

<keep-alive include="a">
    <component></component>
</keep-alive>

第二种（推荐）

  添加到router.js 中管理 meta下 keepAlive=true的组件被缓存

page.vue

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


router.js
    // 报表可视化
    {
      path: '/report/lookBoard', // 看板
      component: require('../views/report/LookBoard.vue'),
      meta: {
        title: '看板',
        keepAlive: true
      }
    },

 

生命周期钩子：

export default {
  created () {
    console.log('页面第一次进来执行')
  },
  activated() {
    console.log('页面缓存后再次进来执行')
  },
  deactivated() {
    console.log('离开页面的时候执行')
  },
}

注意：

   当你返回到当前页面的时候只执行这两个生命周期钩子，其他不执行