【Vue】refを使ってリアクティブなデータを扱う

refとは？

refはvue3のcomposition APIで「リアクティブな変数を扱うために使うもの」です。
vue2ではこんな感じで、dataで定義してましたが、vue3からはdataは使わなくなります。

test.vue

<script>
export default {
    data() {
        return {
            name: 'hoge'
        }
    }
}
</script>

ちなみにリアクティブな変数とは、値が更新された時に変更が検知される状態です。
値の変更を検知することで、即座に画面に反映させたりすることができます。

refはこうやって使う

今回は簡単な基本パターンを書いていきます。

ref-test.vue

<script setup>
    const name = ref('山田太郎')
    
    // valueでアクセスすることが可能
    console.log(name.value);
</script>

<template>
    <!-- テンプレート側で使うときはvalueは不要 -->
    {{ name }}　<!-- 山田太郎が表示される -->
</template>

ここで混乱してしまうが、scriptとtemplateとで値の参照の仕方が異なることです。

script内では、refで値をラッピングすることで正確なリアクティブの機能を実現しています。そのため、
valueというプロパティを使ってrefの中身を取り出して使います。

templateの中では、refでラッピングしていても自動でアンラップしてくれて、直感的にわかりやすくデータを扱うことができます。

refの中身を更新してみる

ref-test.vue

<script setup>
    const name = ref('山田太郎')
    
    const changeName = () => {
        name.value = '田中二郎' //値の代入もvalueに対して行う
    }

</script>

<template>
    {{ name }}　<!-- ボタンを押すと、田中二郎が表示されるようになる -->
    <button @click="changeName">名前変更ボタン</button>
</template>

値に更新を加えたいときも、valueに代入する形で行います。

vue2と結構書き方が違うので、最初は混乱しましたが、分かれば便利です。
また、応用版とかも書いていきたいと思います。