Vue3 コンポジション API の紹介

<テンプレート>
 <div>{{count}}</div>
 <button @click="addCount">追加</button>
</テンプレート>

<script lang="ts">
'vue' から defineComponent、ref、onMounted をインポートします。

エクスポートデフォルトdefineComponent({
 名前: 'アプリ'、
 設定 （） {
  定数カウント = ref(0)
  定数getCount = () => {
   count.value = Math.floor(Math.random() * 10)
  }
  定数addCount = () => {
   カウント値++
  }
  マウント時(() => {
   カウントを取得する()
  })

  戻る {
   カウント、
   追加カウント
  }
 }
});
</スクリプト>

<テンプレート>
 <input type="number" placeholder="確認コードを入力してください">
 <button v-if="count">{{count}} 秒後に再送信できます</button>
 <button v-else @click="startCount">確認コードを送信</button>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、ref、reactive} をインポートします。

定数userCountDown = () => {
 定数カウント = ref(0)
 const countDown = (num: 数値) => {
  count.value = 数値
  番号--
  （数値＞0）の場合{
   タイムアウトを設定する(() => {
    countDown(数値)
   }, 1000)
  }
 }
 定数開始カウント = () => {
  // 検証コードを取得
  カウントダウン(60)
 }

 戻り値: { count, startCount }
}

エクスポートデフォルトdefineComponent({
 名前: 'ホーム'、
 設定 （） {
  const { count, startCount } = userCountDown()
  戻り値: { count, startCount }
 }
});
</スクリプト>

<テンプレート>
 <div>{{count}}
  <button @click="changeCount">追加</button>
 </div>
 <div>生徒の名前は: {{student.name} です。}</div>
 <div>生徒の年齢は: {{student.age}} です
  <button @click="changeStudentAge(20)">追加</button>
 </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、ref、reactive} をインポートします。

エクスポートデフォルトdefineComponent({
 名前: 'ホーム'、
 設定 （） {
  定数カウント = ref(0)
  定数変更カウント = () => {
   カウント値 = カウント値 + 1
  }
  const 学生 = リアクティブ({
   名前: 'ボブ'、
   年齢: 12
  })
  const changeStudentAge = (年齢: 数値) => {
   学生.年齢 = 年齢
  }
  戻る {
   カウント、
   変更回数、
   学生、
   学生年齢の変更
  }
 }
});
</スクリプト>

<テンプレート>
 <div>{{count}}</div>
 <div>{{doubleCount}}</div>
 <button @click="addCount">追加</button>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、ref、computed、watchEffect、watch } をインポートします。

エクスポートデフォルトdefineComponent({
 名前: 'アプリ'、
 設定 （） {
  定数カウント = ref(0)
  watch(count, () => { // 複数の場合は、[count, count1]を配列として渡す
   console.log('watch', count.value)
  })
  ウォッチエフェクト(() => {
   console.log('watchEffect', count.value)
  })
  定数addCount = () => {
   カウント値++
  }
  const doubleCount = 計算された(() => {
   count.value * 2 を返す
  })
  戻る {
   カウント、
   ダブルカウント、
   追加カウント
  }
 }
});
</スクリプト>