Vue.js で ref フックとリアクティブ フックを選択するときは、どちらがより便利かを判断するために、それらの違いといつ使用するかを理解することが重要です。どちらのフックもリアクティブ データの作成に使用されますが、その動作方法と使用法は少し異なります。

参照

便利な機能

1. プリミティブ値に適しています: ref は主にプリミティブ型 (文字列、数値、ブール値) に役立ちます。たとえば、count、message.

のような単純な値の場合

2. DOM 要素の参照: ref は、DOM 要素の保存と参照に使用されます。たとえば、

   .

3. 値へのアクセスは簡単です: ref を使用する場合、.value.

を介して値にアクセスして変更できます。

例

import { ref } from 'vue';

const count = ref(0);
count.value  ; // Qiymatni oshirish

反応的な

便利な機能

1. 複雑なデータ構造に適しています: リアクティブ オブジェクトや配列などの複雑な構造を持つデータに便利です。オブジェクトまたは配列全体がリアクティブになります。
2. オブジェクトの操作: リアクティブ オブジェクトのすべてのプロパティがリアクティブになるため、プロパティに直接アクセスして変更できます。

例

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});
state.count  ; // Qiymatni oshirish
state.name = 'Vue 3'; // Xususiyatni o'zgartirish

refとreactiveの違い

1. 値の種類:

   • ref は単純な値に適しており、.value.
   経由でアクセスされます。
   • リアクティブ複合体は、状態を持つオブジェクトまたは配列に適しており、プロパティに直接アクセスします。

2. ユースケース:

   • ref は、プリミティブ型 (文字列、数値、ブール値) と DOM 要素に使用されます。
   • リアクティブオブジェクトや配列などの複雑な構造に使用されます。

3. 反応性:

   • ref は 1 つの値のみに反応します。
   • reactive は、すべてのプロパティを含むオブジェクトまたは配列全体をリアクティブにします。

都合の良いときに選択してください

• 単純な値がある場合、または DOM 要素を参照する必要がある場合は、ref を使用します。
• 多くのプロパティを持つオブジェクトまたは配列がある場合は、reactive を使用します。

よくある例

次は、ref と reactive を一緒に使用する例です:

この例は、ref フックとリアクティブ フックを一緒に使用する方法を示しています。選択は、扱うデータの種類によって異なります。

PS: 上の写真ではなぜそう書かれているのですか?????????? 、ビデオレッスンで答えます:)

ネットワーク上で私たちをフォローしてください。記事が役立つ場合は、お友達と共有してください。 ?