【vue】keep-alive缓存

一、vue缓存

1. keep-alive

主要用于保留组件状态或避免重新渲染
activated钩子函数
组件激活时调用，该钩子在服务器端渲染期间不被调用
deactivated钩子函数
组件停用时调用，该钩子在服务器端渲染期间不被调用

//app.vue
<template>
  <div id="app">
    <transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

//失活路由缓存
<li :class="{nav_current:(current=='index')}">
  <keep-alive>
    <router-link to="/index">页面</router-link>
  </keep-alive>
</li>

//失活组件缓存
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

一些初始化操作放在mounted中，因为来回切换公共组件时mounted未被调用，需要在切换时被执行的代码放在钩子函数activated中

//<keep-alive>内路由切换时的公共组件
 activated() {
 	//todo
 }