Vue の Reactive と Ref の違いは何ですか?

Vue 3 では、Composition API が導入され、アプリケーションの反応性を管理するためのより柔軟で強力なツールが開発者に提供されました。

これらのツールのうち、reactive と ref は、リアクティブ状態を作成するための 2 つの重要なメソッドです。一見すると似ているように見えますが、クリーンで効率的な Vue コードを作成するには、その違いを理解することが不可欠です。

この記事では、reactive と ref の違いをリストし、それぞれをいつ使用するかを決定するのに役立つ実践的な例を示したいと思います :)

お楽しみください!

?リファレンスとリアクティブとは何ですか?

これら 2 つの Vue 3 ユーティリティを比較できるようにするには、それらが何であり、どのように機能するかをより深く理解する必要があります。

リアクティブとは何ですか?

reactive は、Vue 3 によって提供される、非常に反応性の高いオブジェクトを作成するメソッドです。オブジェクトのプロパティをリアクティブ データに変換します。つまり、これらのプロパティに変更を加えると、UI の更新がトリガーされます。 reactive の構文は次のようになります:

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John Doe',
    age: 30
  }
});

state.count++; // Updates the UI
state.user.name = 'Jane Doe'; // Updates the UI

reactive は、配列を含むオブジェクトで最もよく機能し、深い反応性を備えています。これは、オブジェクトのすべてのネストされたプロパティがリアクティブになることを意味します。

オブジェクトまたは配列を含む複雑な状態を管理する場合は、リアクティブを使用します。これは、単一の状態の一部として複数のプロパティを追跡する必要があるシナリオに最適です。

レフとは何ですか？

ref は Vue 3 で提供される別のメソッドですが、単一の値へのリアクティブな参照を作成します。 reactive とは異なり、ref は文字列、数値、ブール値などのプリミティブなデータ型と個々のオブジェクトを処理するように設計されています。 ref の構文は次のようになります:

import { ref } from 'vue';

const count = ref(0);
const userName = ref('John Doe');

count.value++; // Updates the UI
userName.value = 'Jane Doe'; // Updates the UI

ref はプリミティブ値と単一オブジェクトに対して機能し、実際の値へのアクセスを提供するリアクティブ ラッパー .value プロパティが付属しています。

単一のリアクティブ値を管理する場合、または数値や文字列などの非オブジェクト型のリアクティブ性が必要な場合は、ref を使用します。

?リアクティブとリファレンス

reactive と ref が何であるかがわかったので、それらを比較して違いと使用例を見てみましょう:

	reactive	ref
Purpose	Reactive state for objects and arrays	Reactive state for single values or objects
API	Works directly with the object	Requires .value to access or update values
Reactivity Depth	Deep reactivity	Shallow reactivity
Simplicity	Best for managing structured state	Best for simple, isolated values

違いをよりよく理解するために、次の例を見てみましょう。

例 1: リアクティブ オブジェクトとプリミティブ値の Ref

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John Doe',
    age: 30
  }
});

state.count++; // Updates the UI
state.user.name = 'Jane Doe'; // Updates the UI

例 2: リアクティブ アレイと参照アレイ

import { ref } from 'vue';

const count = ref(0);
const userName = ref('John Doe');

count.value++; // Updates the UI
userName.value = 'Jane Doe'; // Updates the UI

例 3: ネストされた状態に Reactive を使用する

import { reactive, ref } from 'vue';

const reactiveState = reactive({ count: 0 });
const refCount = ref(0);

// Incrementing values
reactiveState.count++; // Directly updates the object property
refCount.value++; // Updates the .value property

ref で同じ深い反応性を実現するには、ネストされたオブジェクトを reactive でラップする必要があります。

const reactiveArray = reactive([1, 2, 3]);
const refArray = ref([1, 2, 3]);

reactiveArray.push(4); // Reactivity works on array mutations
refArray.value.push(4); // Need .value for array operations

リアクティブとリファレンスの混合

実際のアプリケーションでは、reactive と ref を一緒に使用することがよくあります。たとえば、複雑なオブジェクトの管理には reactive を使用し、単一の状態値には ref を使用できます。

const user = reactive({
  profile: {
    name: 'Alice',
    age: 25
  }
});

user.profile.age = 26; // Automatically reactive at all levels

この機能はおそらく 1 つの Vue 3 ユーティリティだけで提供できますが、この素晴らしいフレームワークの作成者はすでにそれを検討し、柔軟性を高めるために分割することにしました :)

?もっと詳しく知る

Vue、Nuxt、JavaScript、またはその他の便利なテクノロジーについて詳しく知りたい場合は、このリンクをクリックするか、下の画像をクリックして VueSchool をチェックしてください。

日常の仕事やサイドプロジェクトに役立つ最新の Vue または Nuxt アプリケーションを構築する際の最も重要な概念をカバーしています?

✅ まとめ

reactive と ref はどちらも Vue 3 でのリアクティブ性を管理するための強力なツールですが、目的は異なります。構造化された複雑な状態には reactive を使用し、孤立した値またはプリミティブな値には ref を使用します。それらの違いを理解することで、適切な作業に適切なツールを選択でき、コードがよりクリーンで保守しやすくなります。

プロジェクトで両方を試して、開発スタイルに最適なバランスを見つけてください。

気をつけて、また次回お会いしましょう!

そしていつものようにコーディングを楽しんでください?️

以上がVue の Reactive と Ref の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。