【Vue.js】之keep-alive

keep-alive

• 缓存组件
• 频繁切换，不需要重复渲染
• Vue常见性能优化

activated函数：keep-alive组件激活时调用

activated函数：keep-alive组件停用时调用

包裹动态组件时, 会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染
例如有一个列表和一个详情, 那么用户就会经常执行打开详情 => 返回列表 => 打开详情…这样的话列表和详情都是频率很高的一个页面，就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染而不是重新渲染。

代码实例-KeepAlive实现选项卡切换

KeepAlive.vue

<template>
  <div>
    <button @click="changeState('A')">A</button>
    <button @click="changeState('B')">B</button>
    <button @click="changeState('C')">C</button>

    <keep-alive>
      <!-- tab 切换 -->
      <KeepAliveStageA v-if="state === 'A'" />
      <!-- v-show -->
      <KeepAliveStageB v-if="state === 'B'" />
      <KeepAliveStageC v-if="state === 'C'" />
    </keep-alive>
  </div>
</template>

<script>
import KeepAliveStageA from './KeepAliveStateA'
import KeepAliveStageB from './KeepAliveStateB'
import KeepAliveStageC from './KeepAliveStateC'

export default {
  components: {
    KeepAliveStageA,
    KeepAliveStageB,
    KeepAliveStageC
  },
  data () {
    return {
      state: 'A'
    }
  },
  methods: {
    changeState (state) {
      this.state = state
    }
  }
}
</script>

KeepAliveStateA.vue

<template>
  <p>state A</p>
</template>

<script>
export default {
  mounted () {
    // eslint-disable-next-line
    console.log("A mounted");
  },
  destroyed () {
    // eslint-disable-next-line
    console.log("A destroyed");
  }
}
</script>