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

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.

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

a un attribut .value pour la réaffectation,

ref()

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

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

ref()

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

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

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();
}

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

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

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

reactive() 和 ref() Utilisez uniquement arguments :