activated与deactivated（keep-alive）

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

activated

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

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

deactivated

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

Composition API

import { onActivated, onDeactivated } from 'vue'

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

典型用途

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

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

要点总结

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