Ref VS réactif dans Vue3, quelles sont les différences entre eux ?

Cet article vous présentera ref et reactive dans Vue.js 3, et présentera la différence entre ref et reactive. J'espère qu'il sera utile à tout le monde !

Points clés

reactive() n'accepte que les objets comme paramètres et ne prend pas en charge les types primitifs JS (String, Boolean, Number, BigInt, Symbol, null, undefined ) . [Recommandation associée : reactive() 只接受对象作为参数， 不支持 JS 原始类型 （String， Boolean，Number，BigInt，Symbol，null，undefined）。【相关推荐：vue.js教程】

ref() 会在后台调用 reactive()

因 reactive() 支持对象，而 ref() 内部调用 reactive()，故两个方法都支持对象

但是， ref() 有一个 .value 属性可以用来重新赋值，而 reactive() 不可重新赋值（会丢失响应性）

使用场景

<strong>ref()</strong>

当数值类型是 JS 原始类型时使用 (例如 'string', true, 23)

当赋值对象，且后续需要被重新赋值时 (例如一个数组 - 更多请见这里)

<strong>reactive()</strong>

当数值类型是对象，且不需要重新赋值时使用，ref() 内部也是调用 reactive()，无需徒增开销

总结

ref() 似乎是正确的选择，因为它支持全部的对象类型，而且可以通过 .value 重新赋值。 ref() 很好，但是当你熟悉 API 之后，就知道 reactive() 开销更小，可能发现这个更能满足需求。

ref() 案例

通过使用 ref() 来初始化，但是 ref() 对需要重新赋值的对象比较友好，例如数组。

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

上面采用 reactive() 的话，需要属性赋值取代对象赋值。

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

reactive() 案例

reactive()tutoriel vue.js

]

ref() appellera reactive() en arrière-plan

à cause de reactive()</ code> Prend en charge les objets et <code>ref() appelle en interne reactive(), donc les deux méthodes prennent en charge les objets

Cependant, ref() a un L'attribut .value peut être utilisé pour réaffecter, mais reactive() ne peut pas être réaffecté (la réactivité sera perdue) 🎜🎜🎜🎜scénarios d'utilisation🎜🎜🎜🎜 🎜 ref()🎜🎜🎜Utilisé lorsque le type numérique est un type primitif JS (tel que 'string', true, 23</ code>) 🎜🎜Lors de l'attribution d'un objet et devant ensuite être réaffecté (comme un tableau - <a href="https://github.com/vuejs/docs-next/issues/801#issuecomment-757587022" target= "_blank" rel="noopener noreferrer">Voir ici pour en savoir plus🎜)🎜🎜<code>🎜reactive()🎜🎜🎜Utiliser lorsque le type numérique est un objet et n'a pas besoin d'être réaffecté, ref() appelle également reactive() en interne, sans aucune surcharge supplémentaire🎜🎜🎜🎜Résumé🎜🎜🎜🎜ref() semble être la bonne choix car il prend en charge tous les types d'objets et peut être réaffecté via .value. ref() c'est bien, mais une fois que vous vous êtes familiarisé avec l'API, vous réalisez que reactive() est moins cher et vous trouverez peut-être cela plus adapté à vos besoins. Le cas 🎜🎜🎜🎜ref() 🎜🎜🎜🎜 est initialisé en utilisant ref(), mais ref() est plus convivial pour les objets qui doivent être réaffectés, tels que sous forme de tableaux. 🎜

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

🎜Si reactive() est utilisé ci-dessus, l'affectation d'attributs est requise au lieu de l'affectation d'objets. 🎜

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

🎜🎜🎜reactive() cas 🎜🎜🎜🎜reactive() convient pour initialiser un groupe de données appartenant au même : 🎜rrreee🎜Le code ci-dessus est plus logique que le suivant 🎜rrreee 🎜Plus Pour des connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!