Vue3で扱うアプリケーション・オブジェクトでdata()メソッドとmounted()メソッドがこれまでに出てきました
おさらい
data()メソッド…return{}の中のプロパティの値が後で指定したエレメントに反映されて表示される
mounted()メソッド…オブジェクトを組み込んだ際に実行される処理
ということでした
他にもアプリケーション・オブジェクトで使用されるメソッドがあります
その一つがcreated()メソッドです
createdメソッドとは
mounted()メソッドの処理はアプリケーションに組み込まれる際に実行される処理でした
created()メソッドの処理はオブジェクトが作られる際に実行されます
そこで、created()メソッドはオブジェクトの初期化をする際に使用します
前回のタイマーを少し書き換えました
これを実行すると最初は
このようにStart!の文字が表示されます
これはcreated()メソッドでthis.message = ‘Start!’
としているため、最初にオブジェクトが作成された時にそれが表示されます
そして１秒後に
と、カウントが始まります
これはmounted()メソッドの処理が行われるためです
このように、created()メソッドにオブジェクトの初期化を行うことができます
順番で表すと
1. created(){ … }
2.mounted(){ … }
の順で処理されます
コメント