Vue.js da (ref va reactive) farqi

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. オブジェクトの操作: reactive はオブジェクトのすべてのプロパティをリアクティブにするため、プロパティに直接アクセスして変更できます。

例

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.
を使用します。
• 多くのプロパティを持つオブジェクトまたは配列がある場合は、リアクティブを使用します。

よくある例

ref と reactive を一緒に使用する例を次に示します:

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Todos:</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <input v-model="newTodoText" placeholder="New todo" />
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const message = ref('Hello, Vue 3!');
const todos = reactive([
  { id: 1, text: 'Learn Vue 3' },
  { id: 2, text: 'Build something awesome' }
]);
const newTodoText = ref('');

function addTodo() {
  todos.push({ id: todos.length + 1, text: newTodoText.value });
  newTodoText.value = '';
}
</script>

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

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

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

以上がVue.js da (ref va reactive) farqiの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。