Réactif vs Ref dans Vue Quelle est la différence ?

Vue 3 a introduit l'API Composition, offrant aux développeurs des outils plus flexibles et plus puissants pour gérer la réactivité de leurs applications.

Parmi ces outils, reactive et ref sont deux méthodes clés pour créer un état réactif. Bien qu'ils puissent sembler similaires à première vue, comprendre leurs différences est essentiel pour écrire du code Vue propre et efficace.

Dans cet article, j'aimerais énumérer les différences entre réactif et ref et fournir des exemples pratiques pour vous aider à décider quand utiliser chacun :)

Profitez !

? Qu'est-ce que la référence et le réactif ?

Afin de pouvoir comparer ces deux utilitaires Vue 3, il faudrait mieux comprendre ce qu'ils sont et comment ils fonctionnent.

Qu'est-ce qui est réactif ?

reactive est une méthode fournie par Vue 3 qui crée un objet profondément réactif. Il convertit les propriétés d'un objet en données réactives, ce qui signifie que toute modification de ces propriétés déclenchera des mises à jour dans l'interface utilisateur. La syntaxe de réactif ressemble à ceci :

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John Doe',
    age: 30
  }
});

state.count++; // Updates the UI
state.user.name = 'Jane Doe'; // Updates the UI

réactif fonctionne mieux avec les objets, y compris les tableaux, et est doté d'une réactivité profonde, ce qui signifie que toutes les propriétés imbriquées de l'objet deviennent réactives.

Utilisez réactif lors de la gestion d'états complexes impliquant des objets ou des tableaux. C’est idéal pour les scénarios dans lesquels vous devez suivre plusieurs propriétés dans le cadre d’un seul état.

Qu'est-ce que la réf ?

ref est une autre méthode fournie par Vue 3, mais elle crée une référence réactive à une valeur unique. Contrairement à réactif, ref est conçu pour gérer les types de données primitifs tels que les chaînes, les nombres et les booléens, ainsi que les objets individuels. La syntaxe de ref ressemble à ceci :

import { ref } from 'vue';

const count = ref(0);
const userName = ref('John Doe');

count.value++; // Updates the UI
userName.value = 'Jane Doe'; // Updates the UI

ref fonctionne pour les valeurs primitives et les objets uniques et est livré avec une propriété wrapper réactive .value qui donne accès à la valeur réelle.

Utilisez ref lors de la gestion d'une seule valeur réactive ou lorsque vous avez besoin de réactivité pour un type non-objet, comme un nombre ou une chaîne.

? Réactif vs Réf

Maintenant que nous savons ce qui est réactif et ref, comparons-les pour voir quelles sont les différences et les cas d'utilisation :

Pour mieux comprendre les différences, jetons un œil aux exemples suivants.

Exemple 1 : Objet réactif par rapport à la référence pour les valeurs primitives

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John Doe',
    age: 30
  }
});

state.count++; // Updates the UI
state.user.name = 'Jane Doe'; // Updates the UI

Exemple 2 : Tableau réactif par rapport au tableau de référence

import { ref } from 'vue';

const count = ref(0);
const userName = ref('John Doe');

count.value++; // Updates the UI
userName.value = 'Jane Doe'; // Updates the UI

Exemple 3 : Utilisation de Reactive pour l'état imbriqué

import { reactive, ref } from 'vue';

const reactiveState = reactive({ count: 0 });
const refCount = ref(0);

// Incrementing values
reactiveState.count++; // Directly updates the object property
refCount.value++; // Updates the .value property

Pour que la référence obtienne la même réactivité profonde, vous devez envelopper l'objet imbriqué en réactif :

const reactiveArray = reactive([1, 2, 3]);
const refArray = ref([1, 2, 3]);

reactiveArray.push(4); // Reactivity works on array mutations
refArray.value.push(4); // Need .value for array operations

Mélange réactif et réf

Dans les applications du monde réel, vous utiliserez souvent réactif et ref ensemble. Par exemple, vous pouvez utiliser réactif pour gérer un objet complexe et ref pour une valeur d'état unique.

const user = reactive({
  profile: {
    name: 'Alice',
    age: 25
  }
});

user.profile.age = 26; // Automatically reactive at all levels

Cette fonctionnalité pourrait probablement être fournie par un seul utilitaire Vue 3, mais les créateurs de cet étonnant framework y ont déjà pensé et ont décidé de la diviser pour nous donner plus de flexibilité :)

? Apprendre encore plus

Si vous souhaitez en savoir plus sur Vue, Nuxt, JavaScript ou d'autres technologies utiles, consultez VueSchool en cliquant sur ce lien ou en cliquant sur l'image ci-dessous :

Il couvre les concepts les plus importants lors de la création d'applications Vue ou Nuxt modernes qui peuvent vous aider dans votre travail quotidien ou vos projets parallèles ?

✅Résumé

Reactive et ref sont tous deux des outils puissants pour gérer la réactivité dans Vue 3, mais ils servent à des fins différentes. Utilisez réactif pour les états structurés et complexes et ref pour les valeurs isolées ou primitives. En comprenant leurs différences, vous pouvez choisir le bon outil pour le bon travail, conduisant à un code plus propre et plus maintenable.

Expérimentez les deux dans vos projets pour trouver l'équilibre qui convient le mieux à votre style de développement.

Prends soin de toi et à la prochaine fois !

Et bon codage comme toujours ?️

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!