refについての概要
Vue.js公式には以下の通りにあります。
--引用--
テンプレート内で ref を使用し、後から ref の値を変更した場合、Vue は自動的にその変更を検出し、それに応じて DOM を更新します。これは、依存関係追跡ベースのリアクティビティーシステムによって実現されています。コンポーネントが初めてレンダリングされるとき、Vue はレンダリング中に使用されたすべての ref を追跡します。その後 ref が変更されると、それを追跡しているコンポーネントの再レンダリングがトリガーされます。
つまり、jsの変数の変化はDOMが感知できないわけです。そこでref()関数の登場というわけですね。
refで定義した変数に変更があれば、実際のDOMに即時反映します。
例1:refを使わない場合
下記は、vue内で定義した変数をtemplateに埋め込んでいる例です。change stateボタンを押すと、変数の値である"太郎"が"花子"に変わりますが、画面には反映されません。
<script setup>
let name = "太郎";
const changeState = () =>{
name = "花子";
}
</script>
<template>
<span>
{{ name }}
</span>
<button @click="changeState">change state</button>
</template>
refを使用する場合
変数をrefで定義します。定義した変数の型はref オブジェクトです。
実際の値はrefオブジェクト内にラップされているため、scriptタグ内ではvalueでアクセスする必要がありますが、タグ内では自動でアンラップしてくれるためvalueによるアクセスは不要です。
以下のコードで実行すると、change stateボタンを押下すると{{ name }}の中身である"太郎"が、"花子"に即時変更されます。
<script setup>
import {ref} from 'vue';
let name = ref("太郎");
const changeState = () =>{
name.value = "花子";
}
</script>
<template>
<span>
{{ name }}
</span>
<button @click="changeState">change state</button>
</template>
終わりに
refはデータをリアクティブに反映させるため必要という内容でした。
他にも子コンポーネントの値に反映させたり、refで定義した値を使用した関数も、変更があったら再計算してくれたりと、便利です。