Riot.jsのタグのライフサイクルについてのメモ

公式ページにタグのライフサイクルについてこう書かれている。

A tag is created in following sequence:

1. Tag is constructed
2. Tag’s JavaScript logic is executed
3. HTML expressions are calculated and “update” event is fired
4. Tag is mounted on the page and “mount” event is fired

これに加えてobservableでイベントを発火させたら順番はどうなるか確かめたのでそのメモ。

※確認したバージョンは2.4.1

<script type="riot/tag">
  <app>
    console.log('first');

    // observableによるイベント発火
    obs.trigger('my_event', 'second ');

    // マウント時
    this.on('mount', function() {
      // observableによるイベント発火
      obs.trigger('my_event', 'after mount ');
      console.log('mount!!');
    });

    // アップデート時
    this.on('update', function() {
      // observableによるイベント発火
      obs.trigger('my_event', 'after update ');
      console.log('update!!');
    });

    // アップデート後
    this.on('updated', function() {
      console.log('updated!!');
    });

    // イベント発火時
    obs.on('my_event', function(text) {
      console.log(text + 'my event!!');
    });
  </app>
</script>

上記では以下のタイミングでmy_eventが発火するか確認している。

• appタグのJavaScriptが評価
• updateイベント発火時
• mountイベント発火時

結果はこのようになる。

first
after update my event!!
update!!
after mount my event!!
mount!!
updated!!

ほぼ公式のガイド通りだったが、second my event!!が出力されない。 タグ内のJavaScriptが評価されるタイミングではobservableによるイベントは発火できないということらしい。 覚えておこう。