Vue.js: ref と reactive
Vue.jsのref と reactive について
使い分けについて公式では、まだベストプラクティスは分からないと書いている
>現段階ではrefとreactiveのベストプラクティスを決めるのは時期尚早です。
> 世界中からのフィードバックを踏まえて最終的にはベストプラクティスを作成して提供します。
この記事がわかりやすかった：【Vue.js】ref と reactive どっちを使う？
reactive
オブジェクトや配列などのオブジェクト型にのみ機能する
メリット
Options API の Data の定義と似ている
まとまったデータを定義するのに向いている
デメリット
通常のオブジェクトと区別がつきづらい
reactive メソッドの返り値の型は元のオブジェクトのままなので、変数の型情報を見ただけでは、それが通常のオブジェクトなのか、リアクティブな値なのは判別できない
分割代入するとリアクティブ性が失われる
これが大きいデメリットと主張している
tsconst state = reactive({
count: 0,
});
let { count } = state;こうすると
count はリアクティブじゃなくなる分割代入を利用したい場合は、
toRefs を使って ref に変換する let { count } = toRefs(state); オブジェクトや配列などのオブジェクト型だけでなく、プリミティブ型もいける
Web記事によってはプリミティブ型専用と説明されていたりするが、型<T>を渡せばオブジェクト型もいける
メリット
リアクティブなデータか判別しやすい
const count = ref(0) // Ref<number> 型情報を見れば、Ref 型だと分かる
デメリット
常に .value でアクセスする必要がある
なぜref が推奨か？
>Composables 関数として公開するときは常に Ref 型とする
これが公式で推奨されているから
>You have probably noticed that we have been exclusively using ref() instead of reactive() in composables. The recommended convention is for composables to always return a plain, non-reactive object containing multiple refs. This allows it to be destructured in components while retaining reactivity:
例えば、reactive で公開していると、以下のような分割代入を使うとリアクティブ性が失われてしまう
const { data, loading, error } = useFetch('/api/users')