Vue ＜keep-alive＞元素分析

vue <keep-alive>实例代码：

<template>
    <div id="Home">
      <div class="wrapper">
        <sideBar></sideBar>
          <div class="main" :class="{'content-collapse':collapse}">
            <Tags></Tags>
            <div class="container">
              <!--<tabs></tabs>-->
              <transition name="move" mode="out-in">
                <!-- 页面跳转方式 -->
                <keep-alive>
                  <router-view></router-view>
                  <!-- 使用<keep-alive>将其动态组件包裹，会缓存不活动的组件实例，而不是销毁它们。 
                    <keep-alive>要求被切换到的组件都有自己的名字，不论是通过组件的name选项还是局部/全局注册
                    -->
                </keep-alive>
              </transition>
            </div>
          </div>
        </div>
      </div>
    <!-- </div> -->
</template>

<script>
  import {mapState} from 'vuex'
  import sideBar from '../../components/sidebar/sidebar'
  import Tags from '../../components/tags/tags'
    export default {
      name: 'Home',
      components:{
        sideBar,
        Tags,
      },
      data () {
        return {
            a:null
        }
      },
      computed:{
        ...mapState({
          collapse:store=>store.collapse
        }),
      },
      methods:{
      }
    }
</script>
<style scoped>

</style>

vue API对<keep-alive>的解释

• 官网API入口

keep-alive

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

• 用法：
  包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

• 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

其他请参考API！