vue中 keep-alive以及activated,deactivated生命周期的用法

vue官网的描述：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

通过描述我们知道，它会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作。

先定义两个组件

<template>
  <div>
    <h2>我是A组件</h2>
    <div>
      <button @click="show = !show" class="isShow">切换</button>
    </div>
    <div v-if="show" class="show">[显示]</div>
    <div v-if="!show" class="hidden">[隐藏]</div>
  </div>
</template>

<script>
export default {
  name: "A",
  data() {
    return {
      show: true,
    };
  },
  methods: {},
  mounted() {},
  created() {
    console.log("created");
  },
  activated() {
    console.log("activated");
  },
  deactivated() {
    console.log("deactivated");
  },
};
</script>

<style>
.isShow {
    width: 80px;
    height: 40px;
    color: #ffffff;
    background: #000;
    font-size: 20px;
    outline: none;
    border: none;
}
.show, .hidden {
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
}
</style>

　　

<template>
  <div>
    <h2>我是B组件</h2>
  </div>
</template>

<script>
export default {
  name: "B",
  components: {},
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style>
</style>

　　把A,B组件引入到父组件中

<template>
  <div class="father">
      <div class="btn">
          <button @click="currentView ='A'" class="a">A</button>
          <button @click="currentView ='B'" class="b">B</button>
      </div>
      <div>
          <keep-alive>
              <component :is="currentView"></component>
          </keep-alive>
          <!-- <component :is="currentView"></component> -->
      </div>
  </div>
</template>

<script>
import A from '../../components/A'
import B from '../../components/B'
export default {
    components: {
        A,
        B
    },
    data(){
        return{
            currentView: 'B'
        }
    }

}
</script>

<style>
.father {
    width: 100%;
    text-align: center;
    margin: 100px auto;
}
.a {
    width: 100px;
    margin-right: 50px;
}
.b {
    width: 100px;
}

</style>

　　页面如下

 

 

 我们点击按钮b切换到a组件，可以看到created和activated执行了。然后我们把a组件的show切换成hide，在进行组件切换。

 

 

 

效果如下：
可以看到离开的A组件的时候deactivated执行了（每次离开当前组件都会执行），再切换回来activated执行了（activated每次切换回来都会执行）、created没有执行（因为组件是缓存并不是销毁，所以created只会执行一次）。而且我们在组件切换之前改的hide，切换回来还是hide，这样就能一直保存组件的状态了。

 

 
作者：天微亮gxf
链接：https://www.jianshu.com/p/0272c0fe9392
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。