码农教程 - 一技在手,衣食无忧! tools

Vue deactivated 生命周期挂钩

❮ 上一节 Vue 生命周期钩子参考 下一节 ❯

示例

使用deactivated生命周期钩子每次都会记录deactivated称为钩子。

export default {
  data() {
    return {
      hookLog: []
    }
  },
  deactivated() {
    console.log("deactivated")
    this.hookLog.push("deactivated");
  }
}
运行示例 »

定义和用法

这个deactivated当缓存的组件从 DOM 中删除但未销毁时，生命周期钩子就会运行。

使用内置的组件来缓存<KeepAlive>成分。

缓存组件创建后，可以多次从 DOM 中插入和删除，每次从 DOM 中删除（但不销毁）这样的缓存组件时，deactivated调用生命周期钩子。

笔记：之间的区别deactivated和unmountedhooks 的特点是，当缓存的组件从 DOM 中删除（没有被销毁）时，只有deactivated称为钩子。

相关页面

Vue教程：Vue 生命周期挂钩

Vue教程：“激活”的钩子

Vue教程：“停用”的钩子

Vue教程：“安装”挂钩

Vue教程：“未安装”的钩子

Vue参考：Vue“激活”生命周期挂钩

Vue参考：Vue“安装”生命周期挂钩

Vue参考：Vue“卸载”生命周期挂钩


❮ 上一节 Vue 生命周期钩子参考 下一节 ❯