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' 生命周期钩子
