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

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

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

ref() case

ref() dimulakan dengan menggunakan ref(), tetapi

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

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

reactive() case

reactive()

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

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!