Component lifecycle

Instance lifecycle hooks

Each component instantiated goes through a series of steps, for example it needs to bind events and elements from decorators to the DOM. Through the process every component runs functions called lifecycle hooks, giving users opportunity to provide code in each step of lifecycle.

For example init runs when component is initialized.

@Component('video')
class Video {
init() {
this.player = videojs(this.$data.player);
this.player.ready(() => {
this.player.play();
});
}
destroy() {
this.player.dispose();
}
}

There are more hooks in different phases of component life as destroy.

Lifecycle Diagram

Diagram below presents full component lifecycle and what hooks are available in which phase of the life of component.