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
2k
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.4k
ionic/vueもβ版になったのでちゃんと触ってみた
takumiz19
0
670
Vueでネイティブアプリを作り倒す
takumiz19
1
1.6k
Other Decks in Programming
See All in Programming
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
22
8.7k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
630
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
AHC051解法紹介
eijirou
0
610
コンテキストエンジニアリング Cursor編
kinopeee
1
640
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
TanStack DB ~状態管理の新しい考え方~
bmthd
2
210
JetBrainsのAI機能の紹介 #jjug
yusuke
0
210
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
1.9k
兎に角、コードレビュー
mitohato14
0
140
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Producing Creativity
orderedlist
PRO
347
40k
Navigating Team Friction
lara
188
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
We Have a Design System, Now What?
morganepeng
53
7.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Visualization
eitanlees
146
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Fireside Chat
paigeccino
39
3.6k
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