码农教程 - 一技在手,衣食无忧! tools

目录

Vue 'activated' Lifecycle Hook

❮ Previous Vue Lifecycle Hooks Reference Next ❯

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);
  }
}
Run Example »

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


❮ Previous Vue Lifecycle Hooks Reference Next ❯