Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
42 lines (28 sloc) 1.09 KB
title type order
Lifecycle
guide
8

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.

DOM element correlated with component receives `strudel-init` class after full component initialization.

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.