activated与deactivated（keep-alive）

这两个钩子仅在组件被 <keep-alive> 包裹时触发。

activated

vue

<keep-alive>
  <MyComponent />
</keep-alive>

JavaScript

export default {
  activated() {
    // 组件被激活（从缓存恢复）
    console.log('组件已激活')
  }
}

deactivated

JavaScript

export default {
  deactivated() {
    // 组件被停用（存入缓存）
    console.log('组件已停用')
  }
}

Composition API

JavaScript

import { onActivated, onDeactivated } from 'vue'

export default {
  setup() {
    onActivated(() => {
      console.log('激活')
    })
    
    onDeactivated(() => {
      console.log('停用')
    })
  }
}

典型用途

JavaScript

export default {
  activated() {
    // 恢复数据或状态
    this.restoreState()
  },
  deactivated() {
    // 保存状态以便下次恢复
    this.saveState()
  }
}

钩子	触发时机	用途
activated	从缓存恢复时	恢复状态、刷新数据
deactivated	存入缓存时	保存状态、暂停操作

未被 <keep-alive> 包裹的组件不会触发这两个钩子。

要点总结

仅在 <keep-alive> 缓存组件中有效
activated 组件从缓存中恢复时触发
deactivated 组件存入缓存时触发
用于管理缓存组件的状态恢复