Vue activated 生命周期钩子

实例

每次调用 activated 钩子时，使用激活的 activated 生命周期钩子进行日志记录。

export default {
  mounted() {
    console.log("mounted");
    const liEl = document.createElement("li");
    liEl.innerHTML = "mounted";
    this.$refs.olEl.appendChild(liEl);
  },
  activated() {
    console.log("activated");
    const liEl = document.createElement("li");
    liEl.innerHTML = "activated";
    this.$refs.olEl.appendChild(liEl);
  }
}

定义与用法

activated 当缓存的组件被插入到 DOM中 时，生命周期钩子就会运行。

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

创建缓存组件后，可以多次将其插入 DOM 和从 DOM 中移除，每次将此类缓存组件插入 DOM 时，都会调用 activated 的生命周期钩子。

关联页面

Vue 教程: Vue 生命周期钩子

Vue 教程: activated 钩子

Vue 教程: deactivated 钩子

Vue 教程: mounted 钩子

Vue 教程: unmounted 钩子

Vue 参考引用: Vue deactivated 生命周期

Vue 参考引用: Vue mounted 生命周期

Vue 参考引用: Vue unmounted 生命周期