- リフ(ref): リフ(ref)は、Vue 3における新しいリアクティブなデータ型です。リフは単一の値を保持し、その値への参照を提供します。リフは、基本的なデータ型やオブジェクト、配列など、さまざまなデータをラップすることができます。リフを使用すると、データの変更を追跡し、DOMへの反映を自動的に行うことができます。
以下は、リフの使用例です。
import { ref } from 'vue';
const count = ref(0); // リフの作成
console.log(count.value); // リフの値にアクセス
count.value++; // リフの値の変更- リアクティブ(reactive): リアクティブ(reactive)は、Vue 3で導入されたもう1つのリアクティブなデータ型です。リアクティブは、オブジェクトや配列などのデータ構造全体をラップし、そのデータ構造内の変更を追跡します。リアクティブを使用することで、データの変更を自動的に検知し、関連するコンポーネントやDOMに反映することができます。
以下は、リアクティブの使用例です。
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello Vue!'
});
console.log(state.count); // リアクティブなデータへのアクセス
state.count++; // リアクティブなデータの変更リフとリアクティブは、どちらもデータの変更を追跡する機能を提供しますが、使用する場面や目的によって使い分けることができます。基本的には、単一の値を扱う場合はリフを使用し、オブジェクトや配列などのデータ構造全体を扱う場合はリアクティブを使用するのが一般的です。
以上が、Vue 3におけるリフとリアクティブの違いと使用方法についての解説です。これらの機能を適切に活用することで、より効率的なVueアプリケーションの開発が可能になります。