Réf vs React dans Vue 3 ?

Question

Découvrez quelques exemples tirés des didacticiels d'aperçu de Vue 3 de certaines personnes. [Actuellement en version bêta]

J'ai trouvé deux exemples :

Formule de réaction

Answer 1

Il existe certaines similitudes entre

ref 和 reactive dans le sens où ils fournissent tous deux un moyen de stocker des données et permettent de répondre aux données.

Mais :

Différence de haut niveau :

const wrappedBoolean = reactive({
  value: true
})

Source : discussion sur le forum Vue< /p>

Réaction

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

Exemple

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

Instructions

Dans ce qui précède, chaque fois que nous souhaitons modifier ou accéder à une propriété de page,
Par exemple page.ads，page.filteredAds sera mis à jour via proxy.

Answer 2

Points clés

• reactive() N'accepte que les objets, pas Les primitives JS (String, Boolean, Number, BigInt, Symbol, null, undefined) < /里>
• ref() 正在幕后调用 reactive() est appelé en coulisses
• reactive() 适用于对象，并且 ref() 调用 reactive()Puisque
s'applique aux objets et
• appelle ref() 有一个用于重新分配的 .value 属性，reactive(), les objets s'appliquent aux deux < /里>

Cependant,

a un attribut .value pour la réaffectation,

n'a pas cet attribut et ne peut donc pas être réaffecté

ref()

Utilisation

• Quand...'string'、true、23
C'est un primitif
• (comme etc.)

Il s'agit d'un objet que vous devrez réaffecter plus tard (comme un tableau -

Plus d'informations icireactive())

• ref()Quand...

Il s'agit d'un objet qui n'a pas besoin d'être réaffecté et vous souhaitez éviter les frais généraux de

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

Résumé

ref()

semble être la voie à suivre car il prend en charge tous les types d'objets et permet la réaffectation à l'aide de .value.

est un bon point de départ, mais à mesure que vous vous habituerez à l'API, vous apprendrez que ref()，但 ref() entraîne moins de frais généraux et vous constaterez peut-être qu'elle répond mieux à vos besoins.

reactive() Cas d'utilisation

Pour les primitives, vous utiliserez toujours reactive(), mais

est utile pour les objets qui doivent être réaffectés (tels que les tableaux).

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

Ce qui précède

nécessite de réaffecter une propriété plutôt que l'objet entier.

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

Cas d'utilisation

Un bon cas d'utilisation pour reactive() est un ensemble de primitives qui vont ensemble :

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

Le code ci-dessus semble plus logique que le code ci-dessus

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

ref()Liens utiles Si vous êtes toujours perdu, ce guide simple m'a aidé :

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

reactive() 和 ref() Utilisez uniquement arguments :

https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c🎜🎜 Les décisions derrière 🎜🎜 et 🎜 existent, avec d'autres informations importantes, dans la RFC de l'API Vue Composition : 🎜https://vuejs.org/guide/extras/composition-api-faq. html#pourquoi-composition-api🎜🎜