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 生命周期钩子。
注意: activated 和 mounted 钩子之间的区别在于，当已存在的缓存组件插入到 DOM 中时，不会调用 mounted 钩子。
相关页面
Vue 教程: Vue 生命周期钩子
Vue 教程: 'activated' 钩子
Vue 教程: 'deactivated' 钩子
Vue 教程: 'mounted' 钩子
Vue 教程: 'unmounted' 钩子
Vue 参考: Vue 'deactivated' 生命周期钩子
Vue 参考: Vue 'mounted' 生命周期钩子
Vue 参考: Vue 'unmounted' 生命周期钩子
