こんにちは。
野中やすおです。
今回の記事では、Vue.jsにおけるRefについてまとめてみました。
そもそもRefとは？
RefはVue 3で導入された、Reactivity APIの改良機能になります。Refは、Vueコンポーネント内でのリアクティブなデータの扱い方を簡素化するために使用されます。
Vue.js - The Progressive JavaScript Framework…
Refオブジェクトを使用するには、ref関数を使います。
Refの使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
import { ref } from 'vue'; // 値が5のRefを作成 const count = ref(5); console.log(count.value); // 5 // 値を変更 count.value = 10; console.log(count.value); // 10 |
どういうことかというと、まずはRefオブジェクトは、.valueプロパティを使用することで内部の値にアクセスすることができます。Refを通じて値にアクセスし、変更することができます(ミュータブル)。
また、Refオブジェクトは自動的に再レンダリングをトリガーします。値が変更されると、関連する部分が自動的に更新され、画面に反映されるので便利ですよね。
Vue.js - The Progressive JavaScript Framework…
また下記の例では、Refオブジェクトをreactiveオブジェクトの一部として使用しています。これによって、オブジェクト内のプロパティのリアクティブな追跡が可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { ref } from 'vue'; const person = reactive({ name: 'Yasuo', age: ref(29) }); console.log(person.age.value); // 29 // 値を変更する person.age.value = 30; console.log(person.age.value); // 30 |
Vue.js - The Progressive JavaScript Framework…
RefをTypeScriptで書く
またRefをTypeSciptを書くことも多々あると思います。ref は初期値から型推論されます。
|
1 2 3 4 5 6 |
import { ref } from 'vue' import type { Ref } from 'vue' const year = ref(10) // Ref<number> count.value = 10 |
一方で、複雑な型を指定する場合には、Ref 型をimportして使用するか、ref() を呼ぶ時に型引数を渡すことで、推論された型を上書きすることができます。
|
1 2 3 4 5 6 7 |
import { ref } from 'vue' import type { Ref } from 'vue' const age: Ref<string | number> = ref('29') const age = ref<string | number>('29') age.value = 29 // No Error! |
またreactiveオブジェクトを使用する場合には、reactive関数を呼び出してオブジェクトをリアクティブにし、その中でref関数を使用して、ageプロパティに初期値を設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { ref, reactive, Ref } from 'vue'; interface Person { name: string; age: Ref<number>; } const person: Person = reactive({ name: 'Yasuo', age: ref(29) }); console.log(person.age.value); // 29 // 値を変更する person.age.value = 30; console.log(person.age.value); // 30 |
Vue.js - The Progressive JavaScript Framework…
おわりに
以上Refの概説と使い方をみてきました！reactive関数からさらに進化したrefをどんどん使っていきたいと思います！
