Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vueのライフサイクルを完全に理解
Search
chan_kaku
January 19, 2019
Programming
0
1.7k
Vueのライフサイクルを完全に理解
Vueのライフサイクルについての説明です
対象としては、これからVueを始めようかなという方用
chan_kaku
January 19, 2019
Tweet
Share
More Decks by chan_kaku
See All by chan_kaku
JJGU CCC 2019 Springまとめ~Java歴1年なりの意見を添えて~
takumiz19
1
2.3k
ionic/vueもβ版になったのでちゃんと触ってみた
takumiz19
0
520
Vueでネイティブアプリを作り倒す
takumiz19
1
1.4k
Other Decks in Programming
See All in Programming
エンターテイメント業界で利用されるAWS
demuyan
0
210
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
Anthropic Cookbook のおすすめレシピ
schroneko
7
870
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
900
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
Git Lint
bkuhlmann
4
750
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
ONE WEDGE_company_guide
1wedge_one
0
460
Elm 0.19.0 Changes
bkuhlmann
0
490
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
VS Code をプロダクトにどう取り込むか
onomax
1
360
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Code Review Best Practice
trishagee
55
15k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
Gamification - CAS2011
davidbonilla
76
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Transcript
ライフサイクルを 完全に理解する 2018/1/19 Vue.js/Nuxt.js meetup #2 chan_kakuz
自己紹介 フリュー株式会社 サーバーサイドエンジニア Vueとの出会いは入社してから ライブ、フェス、ベース、 技術的なところの勉強、お酒、最近はクラフトビール 仕事 趣味 Twitter @chan_kakuz
v-kansai 運営
この話は#1で話そうとした話
今回話すこと
話すこと Vueのライフサイクルについて - そもそもライフサイクルとは - 各ライフサイクルフックの紹介
今回話さないこと
話さないこと Vueの基本的な記法等々、、、、
Vueのライフサイクルとは?
引用:https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム
これ
とはいえ雑すぎるのでちゃんと説明
ライフサイクル インスタンスが生成されてから削除されるまでの流れ Vueではこの流れの中でいくつかのタイミングで フックと呼ばれる関数を実行することができる
順をおって説明
インスタンス作成時
ここ
beforeCreate これはインスタンスの生成前に実行できます このタイミングでは、インスタンスは初期化前ですので、 dataは呼ばれていません
beforeCreate
created これはインスタンスが作成された後で実行されます 個人的にはcreatedは一番使っている印象です!! ※注意として、elementプロパティはまだここでは呼ばれて いません
created
マウント時
ここ
beforeMount インスタンスが作成された後、 elementへのマウントされる前で実行されます
mounted elementへのマウントがされた後に実行されます mountedは、elementへのマウントが行われた後処理されます。 したがって、elでelementを指定している場合、createdではタイミングとして早い と言うことになります。 子コンポーネントを全て再描画することを保証はしていないので、 $nextTickを使うことを推奨されています
データ更新時
ここ
beforeUpdate データの更新があった時に、rerenderされる前に実行され ます。 更新前の既存のDOMに対してアクセスすることができま す。
updated データの更新があった時に、rerenderされた後に実行されます このフックでは、状態変化を行うような処理は推奨されていません。 それが原因で無限ループに入ってしまう可能性がある。 updatedもmountedも子コンポーネントを全て再描画することを保証はしていな いので、 mounted同様$nextTickを使うことを推奨されています。
beforeUpdate, updated
インスタンスの削除時
ここ
beforeDestroy $destroy()が呼ばれた後、インスタンスが削除される前に実 行されます
destroyed $destroy()が呼ばれた後、インスタンスが削除された後に実 行されます
エラー時
errorCaptured このフックは、任意の子孫コンポーネントからのエラーが捕捉された時に、呼び 出されます。 フックは、エラー、エラーをトリガーするコンポーネントのインスタンス、エラーが 捕捉されたかどうかのメッセージを受け取ることができます。 また、エラー伝播を防ぐ為に、falseにすることで任意の箇所以降に広まらない ようにすることも可能です ※このフックはversion2.5.0以降で使用することができます
これで完全理解ですね
素敵なVueライフを!
最後に宣伝
None
fin