Vue.js 中的 keep-alive 和 activated/deactivated 生命周期有什么关系？

keep-alive 是 Vue 中的一个内置组件,可以保留组件状态或避免重新渲染。
activated 和 deactivated 是 keep-alive 中的两个生命周期钩子。
activated 在 keep-alive 组件激活时调用。
deactivated 在 keep-alive 组件停用时调用。

使用方法:

1. 使用 keep-alive 包裹动态组件:

html
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

2. 定义 activated/deactivated 生命周期钩子:

js
activated() {
  // 组件被激活时调用  
},
deactivated() {
  // 组件被停用时调用  
} 

示例:

html
<keep-alive>
  <comp-a v-if="a > b"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive> 

<button @click="a++">Update A</button>  
<button @click="b++">Update B</button>  

js  
components: {
  'comp-a': {
    template: '<div>Component A</div>',
    activated() {
      console.log('Component A activated')
    }
  },
  'comp-b': {
    template: '<div>Component B</div>',
    deactivated() {
      console.log('Component B deactivated')
    }
  }  
}

当我们点击按钮时,组件会切换,但因为使用了 keep-alive,状态会被保留。
对应地,activated 和 deactivated 生命周期钩子也会被调用。

所以:
keep-alive 用于缓存组件状态。
activated 和 deactivated 与 keep-alive 配合,用于在组件激活或停用时执行逻辑。