リアクティビティー パート１
Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする 優れたリアクティビティシステム を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、ref、computed、watch があります。
ここでは、refについて学習します。
ref の基本
ref() は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は .value を通してアクセスすることができます。
@clickは、v-on ディレクティブで、
DOMイベントを監視し、イベントが発生したときに関数を実行する仕組みです。
v-on:イベント名="ハンドラー" という形式で使用します。
ハンドラーには、 メソッド名: @click="myMethod" または インラインの式: @click="count++" で指定します。
v-on ディレクティブは、@ を使うことで省略記法を使えます。
<script setup>
import { ref } from 'vue'
const userName = ref('')
function setNameUser1() {
userName.value = 'ユーザー１'
}
function setNameUser2() {
userName.value = 'ユーザー２'
}
</script>
<template>
<div>
<p>ユーザー名： {{ userName }}</p>
<button @click="setNameUser1">
ユーザー１をセット
</button>
<button @click="setNameUser2">
ユーザー２をセット
</button>
</div>
</template>
現在の実装の課題
プレイグラウンドでlet userNameを用意し、「ユーザー名をセット」ボタンを押したらuserNameに任意のユーザー名が入るようにしています。
<script setup lang='ts'>
let userName = 'No Name'
function setUserName() {
userName = 'Vue Fes Japan'
}
</script>
<template>
<div class="header-right">
<button @click="setUserName">
ユーザー名をセット
</button>
👤
<span>{{ userName }}</span>
</div>
</template>
この方法では：
- userNameがリアクティブではないため、値の変化をVueのリアクティブシステムが検知できない。
- userName = 'Vue Fes Japan'のように値を変えても、画面への自動更新が起きない。
チャレンジ
userNameをrefを使ってリアクティブな値にし、値の変化を検知できるようにしてください。
let userNameをref()を使ってリアクティブな値にしてくださいuserName = "Vue Fes Japan"を.valueを通してアクセスするよう変更してください
<template>内では自動的に.valueがアンラップされるため、{{ userName }}と書くだけでOKです。
また、refはリアクティブなコンテナなので、constで宣言しても問題ありません。
実装後の効果
ref を使用すると：
- データの変更をVueが自動で検知し、UIがリアルタイムに更新されるようになった
- 変更を反映するための手動操作が不要になり、開発効率が向上した
もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
ref を使い、データの変更が自動的に画面に反映されるようになりました！