ライフサイクルフックとリアクティブシステム
この演習で学習する内容
- Vueインスタンスのライフサイクルフック
- リアクティブシステム
演習内容
前の演習で作成したHello World!を表示するアプリケーションを、以下のように変更してみてください。
- Vueインスタンスがマウントされた際に呼び出される
mountedフックを使って、フック内で、2秒後に画面に表示されたHello World!適当なメッセージ(例:こんにちは、世界！)に変わるようにデータmessageを変更する - 監視プロパティ
watchでデータmessageを監視して、内容をconsole.logに出力するようにする
Vue.jsのライフサイクルフックとデータの変更に伴うリアクティブシステムの動作を確認しましょう。