概要

前回に引き続きVueのチュートリアルをやっていきます。

今回からVueCopilotにお越し頂いております。
ウラでちょこちょこ質問していますが本記事では出番無し...

Step9

ライフサイクルについて

ライフサイクル

Vueコンポーネントが生成されてから描画されて破棄されるまでの一連の流れのこと。
この図を見るに、create(作成), mount(描画), update(更新), unmount(破棄) の4つのステージがあって、それぞれに beforeXXX とXXX-ed の計8つのライフサイクルフックというオプションがある。

ライフサイクルフックに関数を登録して自動で実行させることができる。

Step9.Vue

<script>
export default {
  // ...
	mounted(){
    this.$refs.pElementRef.textContent = "Good Morning"
  }
}
</script>

<template>
  <p ref="pElementRef">Hello</p>
</template>

結果
templateの初期の文字列がmountedの内容で置き換わっている

上記コード内の$refsについてはここが参考になった。

Step10

ウォッチャー（watchオプション）について

プロパティの変更に伴って処理を実行させる仕組み。これだけ聞くとComputedとの違いが分からなかったがここの説明が腑に落ちた。

GPTにも聞いてみた回答は以下。

特徴	`computed`	`watch`
主な目的	新しい値をリアクティブに計算（派生データの生成）。	特定のデータの変更を監視して副作用（処理）を実行。
キャッシュ	キャッシュされる（依存するデータが変わるときのみ再計算）。	キャッシュされない（データが変更されるたびに実行）。
主な用途	- 他のデータに基づいて新しい値を計算する場合。	- データ変化時の非同期処理や手動処理。
コードの実行タイミング	必要なときのみ（遅延実行）。	即座に実行（リアルタイム監視）。
値をリターン	する	しない

watch構文例.js

  watch: {
    // 関数名を監視対象のプロパティ名と同じにする
    // 第一引数に変更後の値を, 第二引数に変更前の値を受け取る
    propertyName(newValue, oldValue) {
      console.log(`new value is: ${newValue}`)
    }
  }

Step11

コンポーネントのインポートについて

コンポーネント = 単体のVueファイル。
import文で別コンポーネントをインポートして、componentsオプションに登録するとインポート先の値を参照できるようになる。

main.vue

<script>
// ChildCompは'./ChildComp.vue'のエイリアス
// Python脳なので子コンポーネントの中を見て「どこまでインポートするの？」と面食らった
// JSも勉強しましょう
import ChildComp from './ChildComp.vue'
export default {
  components: {
		ChildComp
	}
}
</script>

<template>
  <ChildComp/>
</template>

ChildComp.vue

<template>
  <h2>A Child Component!</h2>
</template>

結果

続く

次回で完了の見込みです。
JSの勉強も並行しているので時間がかかりましたが、どうにか完了できそう。