Vue 'activated' Lifecycle Hook
Example
Using the activated lifecycle hook to log every time the activated hook get called.
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);
}
}
Definition and Usage
The activated lifecycle hook runs when a cached component is inserted into the DOM.
A component is cached with the use of the built-in <KeepAlive> component.
After a cached component is created, it can be inserted and removed from the DOM many times, and every time such a cached component is inserted into the DOM, the activated lifecycle hook is called.
Note: The difference between the activated and mounted hooks is that the mountedhook is not called when an already existing cached component is inserted to the DOM.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'activated' Hook
Vue Tutorial: The 'deactivated' Hook
Vue Tutorial: The 'mounted' Hook
Vue Tutorial: The 'unmounted' Hook
Vue Reference: Vue 'deactivated' Lifecycle Hook
Vue Reference: Vue 'mounted' Lifecycle Hook
Vue Reference: Vue 'unmounted' Lifecycle Hook