暗記するものでもないが、 create, mount, update, destroy の 4 つに対して、それぞれ before と after の動きがある と、捉えれば覚えやすい。 公式の こちら からライフサイクルの流れを描いた図を転載させていただく。 ライフサイクルダイアグラム 実際に動きを確認する 確認用コード ライフサイクルの動きを見るために、各ライフサイクルのフックに対してログを仕込んだ。 後述の スクリーンショット で、本コードの説明を図とともに見ていく。 <template> <div :class="$style.lifecycle"> <input v-model="properties.message" :class="$style.message" placeholder="edit me"> <p>Message is: {{ properties.messa