vue keep-alive 的使用

keep-alive 使组件或路由切换过程中将状态保留在内存中，防止重复渲染DOM。

在2.1.0版本以前Vue中

<!-- 注意：transition中只能一个元素结构，所以这里要分开写 -->
<transition :name="transitionName">
        <keep-alive>
          <router-view  class="Router" v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
          </router-view>
        </keep-alive>
  	</transition>

    <transition :name="transitionName">
      <router-view  class="Router" v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
      </router-view>
    </transition>

路由中定义keepAlive属性

{ path: '/page1', name: 'page1', component: Page1, meta: { cnName: 'page1',keepAlive: true}}

在2.1.0版本以后Vue中

<transition :name="transitionName">
      <!--注意：使用了inlcude/exclude 要给组件或组件路由增加name属性-->
      <keep-alive :include="includedComponents">
        <router-view class="Router" ></router-view>
      </keep-alive>
    </transition>

路由中定义不用定义keepAlive属性

{ path: '/page1', name: 'page1', component: Page1, meta: { cnName: 'page1'}},

使用keep-alive会增加钩子

activated(){
    alert('使用keep-alive特有事件钩子，在每次进入都触发activated,但不会触发created、mounted等钩子')
  },
  deactivated(){
    alert('使用keep-alive特有事件钩子，在每次退出都触发deactivated')
  },

keep-alive组件的使用，组件的切换还会保存在内存中

<button type="button" @click="showHandle">切换组件</button>
      缓存组件
      <keep-alive>
        <components1 v-if="show1"/>
        <components2 v-if="!show1"/>
      </keep-alive>