Lifecycle

Each component goes through a series of steps — being created, mounted into the DOM, updated, and destroyed. Lifecycle hooks let you run code at each of these stages.

Hook	Timing
mounted	Executed when the component is mounted by a parent or via the instance $mount method.
destroyed	Executed when the component is destroyed by a parent or via the instance $destroy method.
updated	Executed when the component is updated by a parent or via the instance $update method.
terminated	Executed when the instance $terminate method is called.

The lifecycle hooks diagram below present in greater detail how theses hooks works with one another.

Using lifecycle hooks

To use a lifecycle hook, declare it as a method of your class, the framework calls it automatically at the right time.

import { Base } from '@studiometa/js-toolkit';

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  mounted() {
    this.$log('mounted');
  }

  updated() {
    this.$log('updated');
  }

  destroyed() {
    this.$log('destroyed');
  }

  terminated() {
    this.$log('terminated');
  }
}

When extending an existing component, do not forget to call the parent component hook methods via the super keyword:

import Parent from './Parent.js';

export default class Child extends Parent {
  static config = {
    name: 'Child',
  };

  mounted() {
    super.mounted(); // call the parent method
  }
}

Lifecycle hooks diagram

---

See also: Lifecycle hooks