vue 高级特性keepalive

keep-alive 路由被加载过一次后就会把内容放到内存中，会触发新的activated生命周期钩子（我们可以在这里搞事情）,还有deactivated生命周期

keep-alive exclude="detail" exlude忽略detail这个组件就是不把这个组件放入缓存中 

缓存组件keep-alive，频繁切换，但不重复渲染，使用场景tab切换等，性能优化的场景之一   

可以在控制台看log 的输出情况

场景1

<template>
  <!-- rights组件 -->
  <div>
    <button @click="show='a'">a</button>
    <button @click="show='b'">b</button>
    <!-- 切换时会一直触发多次moutend 和destroyed -->
    <!-- <a1 v-if="show==='a'"></a1>
    <b1 v-if="show==='b'"></b1> -->

    <!-- 切换时只会触发一次moutend ，不会触发destroyed -->
    <keep-alive>
      <a1 v-if="show==='a'"></a1>
      <b1 v-if="show==='b'"></b1>
    </keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
// import a1 from '../user/A'
export default {
  data() {
    return {
      info: {
        city: '城市'
      },
      show: 'a'
    }
  },
  components: {
    a1: () => import('../user/A'),
    b1: () => import('../user/B')
  },
  methods: {
  },
}
</script>

<style lang="scss" scoped>
button {
  width: 100px;
}
</style>

<template>
  <div>
    A组件
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log("mounted a");
  },
  destroyed() {
    console.log("destoryed a");
  },
};
</script>

 

<template>
  <div>
    <p>B组件</p>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  mounted() {
    console.log('mounted b');
  },
  destroyed() {
    console.log('destoryed b');
  },
}
</script>

场景2 ： 需求对城市首页做性能优化，使用keep-alive,相同的城市我们这样做没问题，但是城市一改变我们需要重新发请求，我们使用activated生命周期钩子再次发请求,！