Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@kodokunadancer

Vue.jsのライフサイクルを丁寧に図解し直してみた

そもそもVue.jsのライフサイクルとは?

Vueインスタンスが生成されていから破棄されるまでの流れのこと。
基本的にはページが遷移するたびに破棄されデータなどが初期化され新たに生成される。

なぜいちいち破棄しなければならないのか?

ページごとに値が残っていては、Vueとして、サービスとして機能しないから。

Vue公式のライフサイクルの説明

Vueのライフサイクルは公式で以下のように図解してある。
Vue.js公式・ライフサイクルダイアグラム
FireShot Capture 003 - Vue インスタンス — Vue.js - jp.vuejs.org.png

だが英語だし、初見だと少し分かりにくかったので自分なりに補足などしてまとめてみた。

用語確認

初期化
最初の状態に戻すこと。もしくは最初の状態を整えること。
(https://wa3.i-3-i.info/word12961.html)

マウント
Vueの形式で書かれたコンポーネントなどの仮想表現を最終的なUI表現に出力するプロセス。

リアクティブデータ
リアクティブとは値が監視され、値の変更があった場合検知すること。
つまり、リアクティブデータとはVue.jsに値の変更などを逐一監視されているデータのこと。

自分なりに詳細に図解

Vue-10-2.jpg

Vue-11.jpg

Vue-12.jpg

Vue-13.jpg

Vue-14.jpg

Vue-15 2.jpg

参考

Vueのライフサイクル
Vue.js ライフサイクルフック概要

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What is going on with this article?