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);
  }
}
运行示例 »

定义和用法

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

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

缓存组件创建后,可以多次从 DOM 中插入和删除,每次将这样的缓存组件插入到 DOM 中时,都会调用 activated 生命周期钩子。

注意: activatedmounted 钩子之间的区别在于,当已存在的缓存组件插入到 DOM 中时,不会调用 mounted 钩子。


相关页面

Vue 教程: Vue 生命周期钩子

Vue 教程: 'activated' 钩子

Vue 教程: 'deactivated' 钩子

Vue 教程: 'mounted' 钩子

Vue 教程: 'unmounted' 钩子

Vue 参考: Vue 'deactivated' 生命周期钩子

Vue 参考: Vue 'mounted' 生命周期钩子

Vue 参考: Vue 'unmounted' 生命周期钩子