リアクティビティー パート1

Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする 優れたリアクティビティシステム を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、refcomputedwatch があります。 ここでは、refについて学習します。

ref の基本

ref() は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は .value を通してアクセスすることができます。

<script setup>
import { ref } from 'vue'

const userName = ref('')

function setNameUser1() {
  userName.value = 'ユーザー1'
}

function setNameUser2() {
  userName.value = 'ユーザー2'
}
</script>

<template>
  <div>
    <p>ユーザー名: {{ userName }}</p>

    <button @click="setNameUser1">
      ユーザー1をセット
    </button>
    <button @click="setNameUser2">
      ユーザー2をセット
    </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を使ってリアクティブな値にし、値の変化を検知できるようにしてください。

  1. let userNameref()を使ってリアクティブな値にしてください
  2. userName = "Vue Fes Japan".value を通してアクセスするよう変更してください

<template>内では自動的に.valueがアンラップされるため、{{ userName }}と書くだけでOKです。 また、refはリアクティブなコンテナなので、constで宣言しても問題ありません。

実装後の効果

ref を使用すると:

  • データの変更をVueが自動で検知し、UIがリアルタイムに更新されるようになった
  • 変更を反映するための手動操作が不要になり、開発効率が向上した

もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。

ref を使い、データの変更が自動的に画面に反映されるようになりました!

TODOリスト
このチュートリアルでは、簡易的な「TODOリスト」アプリケーションを作りながら、Vue.js の基礎を体系的に学びます。
リストレンダリング
Vueでは v-for ディレクティブを使って配列に基づいて項目のリストをレンダリングできます。これは ToDoリストのようなデータの一覧表示に非常に便利です。
ファイル
エディタ
WebContainerを初期化中
ファイルをマウント中
依存関係をインストール中
Nuxtサーバーを起動中
Nuxtが準備完了を待機中
ターミナル