Ruj lwn. React dalam Vue 3?

Question

Lihat beberapa contoh daripada tutorial pratonton Vue 3 sesetengah orang. [Pada masa ini dalam beta]

Saya dapati dua contoh:

Formula tindak balas

import { reaktif, dikira } daripada 'vue'

eksport lalai {
  persediaan() {
    keadaan const = reaktif({
      kiraan: 0,
      berganda: dikira(() => state.count * 2)
    })

    kenaikan fungsi() {
      negeri.kira++
    }

    kembali {
      negeri,
      kenaikan
    }
  }
}


Rujukan



import { ref, computed, onMounted } daripada "vue";

eksport lalai {
  persediaan(props) {
    //Negeri
    wang const = ref(1);
    const delta = ref(1);

    // Ruj
    const titleRef = ref(null);

    //Peralatan yang dikira
    const formattedMoney = dikira(() => money.value.toFixed(2));

    //Kail
    onMounted(() => {
      console.log("titleRef", titleRef.value);
    });

    // Kaedah
    const add = () => (money.value += Number(delta.value));

    kembali {
      delta,
      wang,
      titleRef,
      Wang berformat,
      Tambah
    };
  }
};

Answer 1

Terdapat beberapa persamaan antara

ref 和 reactive kerana kedua-duanya menyediakan cara untuk menyimpan data dan membenarkan data itu dibalas.

Tetapi:

Perbezaan Tahap Tinggi:

const wrappedBoolean = reactive({
  value: true
})

Sumber: perbincangan forum Vue< /p>

Reaksi

reactive 获取对象并向原始对象返回一个响应式代理.

Contoh

import {ref, reactive} from "vue";

export default {
  name: "component",
  setup() {
    const title = ref("my cool title")
    const page = reactive({
      contents: "meh?",
      number: 1,
      ads: [{ source: "google" }],
      filteredAds: computed(() => {
        return ads.filter(ad => ad.source === "google")
      })
    })
    
    return {
       page, 
       title
    }
  }
}

Arahan

Dalam perkara di atas, bila-bila masa kita mahu menukar atau mengakses harta page,
Contohnya page.ads，page.filteredAds akan dikemas kini melalui proksi.

Answer 2

Isi Penting

• reactive() Hanya menerima objek, bukan JS primitif (String, Boolean, Number, BigInt, Symbol, null, undefined) < /里>
• ref() 正在幕后调用 reactive() dipanggil di belakang tabir
• reactive() 适用于对象，并且 ref() 调用 reactive()Memandangkan
digunakan untuk objek, dan
• memanggil ref() 有一个用于重新分配的 .value 属性，reactive(), objek digunakan untuk kedua-duanya < /里>

Walau bagaimanapun,

mempunyai atribut .value untuk penugasan semula,

tidak mempunyai atribut ini dan oleh itu tidak boleh ditugaskan semula

ref()

Gunakan

• Bila..'string'、true、23
Ia adalah primitif
• (seperti dll.)

Ini ialah objek yang anda perlu agihkan semula kemudian (seperti tatasusunan -

Maklumat lanjut di sinireactive())

• ref() Bila..

Ini adalah objek yang tidak perlu diagihkan semula dan anda ingin mengelakkan overhed

ref() 似乎是可行的方法，因为它支持所有对象类型并允许使用 .value 重新分配。 ref() 是一个很好的起点，但是当您习惯了该 API 后，就会知道 reactive()

Ringkasan

ref()

nampaknya cara untuk pergi kerana ia menyokong semua jenis objek dan membenarkan penugasan semula menggunakan .value.

ialah titik permulaan yang baik, tetapi apabila anda membiasakan diri dengan API, anda akan mengetahui bahawa ref()，但 ref() mempunyai lebih sedikit overhed, dan anda mungkin mendapati ia lebih sesuai dengan keperluan anda.

reactive() Kes guna

Untuk primitif anda akan sentiasa menggunakan reactive(), tetapi

berguna untuk objek yang perlu diagihkan semula (seperti tatasusunan).

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

Di atas

memerlukan penugasan semula harta dan bukannya keseluruhan objek.

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

Kes guna

Kes penggunaan yang baik untuk reactive() ialah set primitif yang dimiliki bersama:

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

Kod di atas terasa lebih logik berbanding kod di atas

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

ref()Pautan berguna Jika anda masih sesat, panduan mudah ini membantu saya:

https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/

reactive() 和 ref() Gunakan argumen sahaja:

https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c🎜🎜 Keputusan di sebalik 🎜🎜 dan 🎜 wujud, bersama-sama dengan maklumat penting lain, dalam Vue Composition API RFC: 🎜https://vuejs.org/guide/extras/composition-api-faq. html#kenapa-komposisi-api🎜🎜