Ref VS reaktif dalam Vue3, apakah perbezaan antara mereka?

Artikel ini akan memberitahu anda tentang ref dan reaktif dalam Vue.js 3, dan memperkenalkan perbezaan antara ref dan reaktif saya harap ia akan membantu semua orang.

Isi penting

reactive() Hanya menerima objek sebagai parameter, tidak menyokong Jenis Primitif JS (String, Boolean, Number, BigInt, Symbol, null, undefined). [Cadangan berkaitan: tutorial vue.js]

ref() akan memanggil reactive()

di latar belakang kerana reactive() menyokong objek dan ref() ialah dipanggil secara dalaman reactive(), jadi kedua-dua kaedah menyokong objek

Walau bagaimanapun, ref() mempunyai atribut .value yang boleh digunakan untuk menetapkan semula, manakala reactive() tidak boleh ditugaskan semula (tanggungjawab akan hilang) <.>

Senario penggunaan

<p>ref()<code><strong>ref()</strong>

Apabila nilai jenis ialah JS Digunakan apabila menggunakan jenis primitif (seperti 'string', true, 23)

apabila menetapkan objek yang perlu ditetapkan semula kemudian (seperti tatasusunan - Lihat lebih lanjut di sini )

<code><strong>reactive()</strong>reactive()

ref()Digunakan apabila jenis berangka ialah objek dan tidak perlu ditugaskan semula, reactive() juga dipanggil secara dalaman

, tanpa menambah overhed

Ringkasan

ref().value nampaknya pilihan yang tepat kerana ia menyokong semua jenis objek, Dan ia boleh ditetapkan semula melalui ref(). reactive() tidak mengapa, tetapi setelah anda membiasakan diri dengan API, anda menyedari bahawa

mempunyai kurang overhed dan anda mungkin mendapati ini lebih sesuai untuk keperluan anda.

ref() case

ref() dimulakan dengan menggunakan ref(), tetapi

lebih mesra kepada objek yang perlu ditugaskan semula , cth.

setup() {
    const blogPosts = ref([]);
    return { blogPosts };
}
getBlogPosts() {
    this.blogPosts.value = await fetchBlogPosts();
}

Jika reactive() digunakan di atas, penetapan atribut diperlukan dan bukannya penetapan objek.

setup() {
    const blog = reactive({ posts: [] });
    return { blog };
}
getBlogPosts() {
    this.blog.posts = await fetchBlogPosts();
}

reactive() case

reactive()

sesuai untuk memulakan kumpulan data kepunyaan kumpulan yang sama:

const person = reactive({
  name: 'Albert',
  age: 30,
  isNinja: true,
});

Kod di atas adalah lebih logik daripada yang di bawah

const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Ref VS reaktif dalam Vue3, apakah perbezaan antara mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!