Vue.js da (ref va reaktif) farqi

Apabila memilih kait ref dan reaktif dalam Vue.js, adalah perlu untuk memahami perbezaannya dan dalam situasi apa untuk menggunakannya. Kedua-dua cangkuk digunakan untuk mencipta data reaktif, tetapi cara ia berfungsi dan penggunaannya sedikit berbeza.

ruj

Keselesaan

1. Sesuai untuk nilai primitif: ref berguna terutamanya untuk jenis primitif (rentetan, nombor, boolean). Contohnya, untuk nilai mudah seperti kiraan, mesej.

2. Merujuk Elemen DOM: ref digunakan untuk menyimpan dan merujuk kepada elemen DOM. Contohnya,

   .

3. Mengakses nilai adalah mudah: apabila bekerja dengan ref, nilai boleh diakses dan ditukar melalui .value.

Contoh

import { ref } from 'vue';

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

reaktif

Keselesaan

1. Sesuai untuk struktur data yang kompleks: Mudah untuk data dengan struktur kompleks seperti objek atau tatasusunan reaktif. Ia menjadikan keseluruhan objek atau tatasusunan reaktif.
2. Bekerja dengan objek: reaktif menjadikan semua sifat objek reaktif, jadi sifat boleh diakses dan diubah suai terus.

Contoh

import { reactive } from 'vue';

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

perbezaan antara ref dan reaktif

1. Jenis Nilai:

   • ref sesuai untuk nilai mudah dan diakses melalui .value.
   • sesuai untuk objek atau tatasusunan dengan keadaan kompleks reaktif dan akses terus sifat.

2. Kes penggunaan:

   • ref digunakan untuk jenis primitif (rentetan, nombor, boolean) dan elemen DOM.
   • Ia digunakan untuk struktur kompleks seperti objek atau tatasusunan reaktif.

3. Kereaktifan:

   • ref bertindak balas hanya satu nilai.
   • reaktif menjadikan keseluruhan objek atau tatasusunan reaktif, termasuk semua sifatnya.

Pilih apabila ia sesuai

• Jika anda mempunyai nilai mudah atau perlu merujuk kepada elemen DOM, gunakan rujukan.
• Jika anda mempunyai objek atau tatasusunan dengan banyak sifat, gunakan reaktif.

Contoh biasa

Berikut ialah contoh penggunaan ref dan reaktif bersama:

<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>

Contoh ini menunjukkan cara ref dan cangkuk reaktif boleh digunakan bersama. Pilihan bergantung pada jenis data yang anda gunakan.

PS: Mengapa ia berkata demikian dalam gambar di atas, ?????????? , saya akan menjawab soalan ini dalam pelajaran video :)

Anda boleh mengikuti kami di rangkaian dan jika artikel itu berguna, komen dan kongsikannya dengan rakan Vuechi anda. ?

Atas ialah kandungan terperinci Vue.js da (ref va reaktif) farqi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!