Comprendre le nouveau système de réactivité dans Vue 3-js tutoriel-php.cn

Understanding the New Reactivity System in Vue 3

L'un des composants principaux d'un cadre frontal moderne est un système réactif. Ce sont des baguettes magiques qui permettent aux applications d'atteindre une interactivité, une dynamicité et une réactivité élevées. Comprendre ce qu'est un système réactif et comment l'appliquer dans la pratique est une compétence cruciale pour chaque développeur Web.

Les systèmes réactifs sont des mécanismes qui conservent automatiquement la source de source de données (modèle) et la couche de représentation des données (vue) en synchronisation. Chaque fois que le modèle change, la vue est renvoyée pour refléter ces changements. Prenons un simple éditeur de Markdown comme exemple. Il a généralement deux vitesses: l'une pour écrire du code Markdown (modification du modèle sous-jacent) et l'autre pour la prévisualisation HTML compilée (affichant des vues mises à jour). Lorsque vous écrivez du contenu dans le volet d'écriture, il est immédiatement et automatiquement prévisualisé dans le volet d'aperçu. Bien sûr, ce n'est qu'un exemple simple. Souvent, la situation est beaucoup plus compliquée.

Dans de nombreux cas, les données que nous souhaitons afficher dépend de certaines autres données. Dans ce cas, les dépendances sont suivies et les données sont mises à jour en conséquence. Par exemple, supposons que nous ayons une propriété FullName, qui dépend des propriétés FirstName et LastName. Lorsque des dépendances sont modifiées, la propriété FullName est automatiquement recalculée et les résultats sont affichés dans la vue.

Maintenant que nous avons déterminé quelle est la réactivité, il est temps d'apprendre comment fonctionne le nouveau mécanisme réactif Vue 3 et comment l'utiliser dans la pratique. Mais avant de le faire, nous allons examiner rapidement l'ancien mécanisme réactif Vue 2 et ses lacunes.

points clés

Vue 3 introduit un système réactif complètement amélioré qui utilise le proxy ES6 et reflète les API pour une flexibilité et une fonctionnalité améliorées.

Le nouveau système réactif dans Vue 3 suit et met automatiquement les modifications de l'état de l'application, prenant en charge les structures de données plus complexes telles que MAP et SET.
,
de Vue 3 permettent aux développeurs de contrôler la réactivité des données plus granulaire, où reactive est pour les types de base et ref est pour les objets. readonly ref Des méthodes API réactives avancées telles que reactive et
computed Vue 3 résout les limitations trouvées dans les systèmes réactifs vue 2, tels que la détection des modifications de la longueur du tableau et des propriétés d'objet ajoutées. watch
Explorez brièvement le mécanisme réactif de Vue 2

Le mécanisme réactif de Vue 2 est plus ou moins "caché". Nous mettons n'importe quoi dans un objet de données et Vue le rend implicitement réactif. D'une part, cela simplifie le travail des développeurs, mais d'autre part, cela conduit également à moins de flexibilité.

Dans les coulisses, Vue 2 utilise ES5 Object.DefineProperty () pour convertir toutes les propriétés de l'objet de données à Getter et setter . Pour chaque instance de composant, Vue crée une instance d'observateur de dépendance. Tous les attributs collectés / suivis en fonction des dépendances pendant le rendu des composants seront enregistrés par l'observateur. Plus tard, lorsque le secteur de la dépendance est licencié, l'observateur est informé que le composant renvoie et met à jour la vue. C'est essentiellement ainsi que la magie fonctionne. Malheureusement, il y a certaines choses à connaître.

Précautions de modification de la détection

Vue ne peut pas détecter certaines modifications de données dues à objet.DefineProperty (). Ceux-ci incluent:

Ajouter / supprimer les attributs à l'objet (par exemple obj.newkey = valeur)
Définir les éléments du tableau par index (par exemple arr [index] = newValue)
Modifiez la longueur du tableau (par exemple Arr.Length = NewLength)

Heureusement, pour gérer ces limitations, Vue nous fournit la méthode API VUE.Set, qui ajoute une propriété à l'objet réactif, garantissant que la nouvelle propriété est également réactive, déclenchant des mises à jour de la vue.

Explorons la situation ci-dessus dans l'exemple suivant:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Copier après la connexion

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});

Copier après la connexion

Dans l'exemple ci-dessus, nous pouvons voir qu'aucune de ces trois méthodes ne fonctionne. Nous ne pouvons pas ajouter de nouvelles propriétés à l'objet personne. Nous ne pouvons pas utiliser des index pour modifier les éléments dans le tableau des activités. Nous ne pouvons pas non plus modifier la durée du tableau des activités.

Bien sûr, il existe des solutions à ces situations, que nous explorerons dans l'exemple suivant:

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      Vue.set(this.person, 'age', 30)
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        Vue.set(this.activities, index, newValue)
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.splice(0)
    }
  }
});

Copier après la connexion

Dans cet exemple, nous utilisons la méthode API VUE.Set pour ajouter une propriété New Age à l'objet Person et sélectionner / modifier un élément spécifique dans le tableau des activités. Dans le dernier cas, nous utilisons uniquement la méthode du tableau Splice () intégré en JavaScript.

Comme nous pouvons le voir, cela fonctionne, mais c'est un peu maladroit et conduit à des bases de code incohérentes. Heureusement, dans Vue 3, ce problème a été résolu. Voyons comment c'est magique dans l'exemple suivant:

const App = {
  data() {
    return {
      person: {
        name: "David"
      },
      activities: [
        "Reading books",
        "Listening music",
        "Watching TV"
      ]
    }
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
}

Vue.createApp(App).mount('#app')

Copier après la connexion

Dans cet exemple à l'aide de Vue 3, nous reviendrons à la fonctionnalité JavaScript intégrée utilisée dans le premier exemple, et maintenant toutes les méthodes fonctionnent correctement.

Dans Vue 2.6, la méthode API Vue.Observable () a été introduite. Il expose un système réactif dans une certaine mesure, permettant aux développeurs de rendre explicitement réactif des objets. En fait, il s'agit de la même méthode exacte que Vue utilise pour envelopper des objets de données en interne, et est utile pour créer un stockage d'état inter-composantes minimal pour des scénarios simples. Mais bien qu'il soit utile, cette approche unique ne correspond pas aux capacités et à la flexibilité de l'API réactive complète et riche en fonctionnalités fournie avec Vue 3. Nous verrons la raison dans la section suivante.

Remarque: Parce que Object.DefineProperty () n'est qu'une fonctionnalité ES5 et ne peut pas être simulé, Vue 2 ne prend pas en charge IE8 et ci-dessous.

Comment fonctionne le mécanisme réactif Vue 3

Le système réactif dans Vue 3 a été complètement réécrit pour profiter de l'API du proxy ES6 et refléter. La nouvelle version révèle une API réactive riche en fonctionnalités qui rend le système plus flexible et puissant qu'auparavant.

L'API proxy permet aux développeurs d'intercepter et de modifier les opérations d'objets de bas niveau sur les objets cibles. Un proxy est un clone / emballage d'un objet (appelé une cible ) et fournit des fonctions spéciales (appelé un trap ) qui répondent à des opérations spécifiques et écrasent le comportement intégré de JavaScript objets. Si vous avez toujours besoin d'utiliser le comportement par défaut, vous pouvez utiliser l'API de réflexion correspondante, qui, comme son nom l'indique, reflète les méthodes de l'API proxy. Explorons un exemple pour voir comment ces API sont utilisées dans Vue 3:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Copier après la connexion

Pour créer un nouveau proxy, nous utilisons le nouveau constructeur proxy (cible, gestionnaire). Il accepte deux paramètres: l'objet cible (objet Person) et l'objet de gestionnaire, qui définit les opérations (obstacles à Get and Set) seront interceptés. Dans l'objet de gestionnaire, nous utilisons les pièges GET et définis pour suivre lorsque les propriétés sont lues et lorsque les propriétés sont modifiées / ajoutées. Nous configurons les instructions de la console pour nous assurer que la méthode fonctionne correctement.

obtenir et définir les pièges prenez les paramètres suivants:

cible: objet cible enveloppé par proxy
Propriété: Nom de la propriété
Valeur: Valeur d'attribut (ce paramètre n'est utilisé que pour les opérations définies)
Récepteur: l'objet sur lequel l'opération est effectuée (généralement un proxy)

La méthode API reflète les mêmes paramètres que sa méthode proxy correspondante. Ils sont utilisés pour implémenter le comportement par défaut pour une opération donnée, retourner le nom de l'attribut pour un piège à obtenir et renvoyer true si une propriété est définie, sinon renvoyez false.

Les fonctions

annotées track () et déclencheurs () sont spécifiques à Vue et sont utilisées pour suivre lorsque les propriétés sont lues et lorsque les propriétés sont modifiées / ajoutées. En conséquence, Vue rejoue le code à l'aide de cette propriété.

Dans la dernière partie de l'exemple, nous utilisons les instructions de console pour sortir l'objet personne d'origine. Nous utilisons ensuite une autre instruction pour lire le nom d'attribut de l'objet proxy. Ensuite, nous modifions la propriété Age et créons une nouvelle propriété de passe-temps. Enfin, nous sortions à nouveau l'objet Person pour voir s'il a été mis à jour correctement.

Il s'agit d'une brève description du mécanisme réactif de Vue 3. Bien sûr, l'implémentation réelle est beaucoup plus complexe, mais j'espère que les exemples fournis ci-dessus sont suffisants pour vous offrir l'idée principale.

Lorsque vous utilisez le mécanisme réactif de Vue 3, les points suivants doivent être pris en compte:

Il n'est disponible que pour les navigateurs compatibles ES6
Le proxy réactif n'égale pas l'objet d'origine

Explorez Vue 3 API Responsive

Enfin, nous allons à l'API réactive Vue 3 lui-même. Dans les sections suivantes, nous explorons l'approche API regroupée logiquement. J'ai regroupé les méthodes parce que je pense qu'il est plus facile de se souvenir de présenter de cette manière. Commençons par les bases.

Méthodes de base

Le premier groupe comprend les méthodes les plus élémentaires pour contrôler la réactivité des données:

Ref accepte une valeur de base ou un objet normal et renvoie un objet REF réactif et mutable. L'objet Ref n'a qu'une seule valeur d'attribut, qui pointe vers une valeur de base ou un objet normal.
Reactive accepte un objet et renvoie une copie réactive de l'objet. La transformation est profonde et affecte toutes les propriétés imbriquées.
Readonly Accepte Ref ou Object (normal ou réactif) et renvoie l'objet en lecture seule de l'objet d'origine. La transformation est profonde et affecte toutes les propriétés imbriquées.
Markraw renvoie l'objet lui-même et l'empêche de se convertir en un objet proxy.

Voyons maintenant l'application pratique de ces méthodes:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Copier après la connexion

Dans cet exemple, nous explorons l'utilisation de quatre méthodes réactives de base.

Tout d'abord, nous créons un objet Counter Ref avec une valeur de 0. Ensuite, dans la vue, nous plaçons deux boutons, incrément et diminuant la valeur du compteur, respectivement. Lorsque nous utilisons ces boutons, nous voyons que le compteur est effectivement réactif.

Deuxièmement, nous créons un objet sensible à la personne. Ensuite, dans la vue, nous placons deux contrôles d'entrée qui sont utilisés pour modifier le nom et l'âge de la personne. Lorsque nous modifions les propriétés humaines, elles sont mises à jour immédiatement.

Troisièmement, nous créons un objet en lecture seule mathématique. Ensuite, dans la vue, nous définissons un bouton pour doubler la valeur de la propriété PI des mathématiques. Mais lorsque nous cliquons sur le bouton, un message d'erreur sera affiché dans la console nous indiquant que l'objet est en lecture seule et que nous ne pouvons pas modifier ses propriétés.

Enfin, nous créons un objet AlphabetNumbers que nous ne voulons pas convertir en proxy et le marquer comme l'objet d'origine. Il contient toutes les lettres et leurs nombres correspondants (pour la concision, seules les trois premières lettres sont utilisées ici). Il est peu probable que cet ordre change, nous gardons donc délibérément cet objet comme un objet normal, ce qui est bénéfique pour les performances. Nous rendons le contenu de l'objet dans le tableau et définissons un bouton pour modifier la valeur de l'attribut B sur 3. Nous le faisons pour montrer que bien que l'objet puisse être modifié, cela ne provoque pas la rérimission de la vue.

Markraw est parfait pour les objets que nous n'avons pas besoin de le rendre réactif, comme les longues listes de codes de pays, les noms de couleurs et leurs nombres hexadécimaux correspondants, etc.

Enfin, nous utilisons la méthode de vérification de type décrite dans la section suivante pour tester et déterminer le type de chaque objet que nous créons. Nous utilisons le crochet de cycle de vie OnMounted () pour déclencher ces vérifications lorsque l'application est initialement rendue.

Méthode de vérification des types

Ce groupe contient les quatre vérificateurs de type mentionnés ci-dessus:

Plus de méthodes de référence

Ce groupe contient d'autres méthodes de référence:

Unref renvoie la valeur de la réf.
Triggerref effectue manuellement tout effet lié à ShallowRef.
CustomRef crée un REF personnalisé avec un contrôle explicite sur son suivi de dépendance et son déclenchement de mise à jour.

Méthode peu profonde

Les méthodes de ce groupe sont les équivalents "peu profonds" de la réf, réactive et en lecture:

ShallowRef crée une référence qui ne suit que son attribut de valeur sans rendre sa valeur réactive.
FallowReactive crée un proxy réactif qui ne suit que ses propres propriétés et n'inclut pas les objets imbriqués.
FallowReadonly crée un proxy en lecture seule qui ne fait que ses propres propriétés en lecture seule, à l'exclusion des objets imbriqués.

Comprenons ces méthodes plus facilement en examinant les exemples suivants:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Copier après la connexion

Cet exemple commence par la création d'un objet REF peu profond paramètres. Ensuite, dans la vue, nous ajoutons deux commandes d'entrée pour modifier leurs propriétés de largeur et de hauteur. Mais lorsque nous essayons de les modifier, nous voyons qu'ils ne sont pas mis à jour. Pour résoudre ce problème, nous ajoutons un bouton qui modifie l'ensemble de l'objet et toutes ses propriétés. Maintenant ça marche. En effet, le contenu de la valeur (largeur et hauteur en tant que propriété unique) n'est pas converti en un objet réactif, mais la variation de la valeur (l'objet entier) est toujours suivi.

Ensuite, nous créons un proxy réactif peu profond de paramètres qui contient les propriétés de largeur et de hauteur et un objet de coords imbriqué contenant les propriétés x et y. Ensuite, dans la vue, nous définissons un contrôle d'entrée pour chaque propriété. Lorsque nous modifions les propriétés de largeur et de hauteur, nous voyons qu'elles sont mises à jour de manière responsable. Mais lorsque nous essayons de modifier les propriétés X et Y, nous voyons qu'elles ne sont pas suivies.

Enfin, nous créons un objet de lecture superficiel SettingsB qui a les mêmes propriétés que les paramètres. Ici, lorsque nous essayons de modifier l'attribut de largeur ou de hauteur, un message d'erreur apparaît dans la console nous indiquant que l'objet est en lecture seule et que nous ne pouvons pas modifier ses attributs. D'un autre côté, les propriétés X et Y peuvent être modifiées sans aucun problème.

Les coords imbriqués des objets des deux derniers exemples ne sont pas affectés par la transformation et restent comme objets normaux. Cela signifie qu'il peut être modifié librement, mais toute modification de celle-ci ne sera pas suivie par Vue.

Méthode de conversion

Les trois méthodes suivantes sont utilisées pour convertir le proxy en réf (s) ou objets normaux:

TOREF crée une réf pour la propriété sur l'objet sensible à la source. Ref maintient une connexion réactive à ses propriétés source.
Torefs convertit un objet réactif en un objet normal. Chaque propriété d'un objet normal est une référence pointant vers la propriété correspondante de l'objet d'origine.
Toraw renvoie l'objet normal d'origine d'un proxy réactif ou en lecture seule.

Voyons comment ces conversions fonctionnent dans l'exemple suivant:

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});

Copier après la connexion

Dans cet exemple, nous créons d'abord un objet réactif de base que nous utiliserons comme objet source.

Ensuite, nous convertissons la propriété du nom de la personne en un reflecte avec le même nom. Ensuite, dans la vue, nous ajoutons deux contrôles d'entrée, un pour le nom de la reflecte et un autre pour la propriété du nom de la personne. Lorsque nous modifions l'un d'eux, l'autre sera également mis à jour en conséquence, de sorte que la connexion réactive entre eux est maintenue.

Ensuite, nous convertissons toutes les propriétés de la personne en une seule reflète contenue dans l'objet PersonDetails. Ensuite, dans la vue, nous ajoutons à nouveau deux commandes d'entrée pour tester un reflète que nous venons de créer. Comme nous pouvons le voir, l'âge de PersonDetails est complètement synchronisé avec la propriété de l'âge de la personne, comme dans l'exemple précédent.

Enfin, nous convertissons l'objet réactif de la personne en un objet normal RawPerson. Ensuite, dans la vue, nous ajoutons un contrôle d'entrée pour modifier la propriété Hobby de RawPerson. Mais comme nous pouvons le voir, Vue ne suit pas les objets convertis.

Méthodes calculées et surveillées

Le dernier ensemble de méthodes est utilisé pour calculer les valeurs complexes et "surveiller" des valeurs spécifiques:

calculé accepte la fonction Getter comme un argument et renvoie un objet REF réactif immuable.
WatchEffect exécute immédiatement une fonction et suit ses dépendances de manière responsable, et la relais lorsque les dépendances changent.
Watch est exactement équivalent à cela. $ Watch et Options de montre correspondantes de l'API Options. Il surveillait une source de données spécifique et applique des effets secondaires dans la fonction de rappel lorsque la source surveillée change.

Considérons l'exemple suivant:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Copier après la connexion

Dans cet exemple, nous créons une variable calculée de nom complet qui est calculée sur la base de FirstName et LastName Ref. Ensuite, dans la vue, nous ajoutons deux commandes d'entrée pour modifier les deux parties du nom complet. Comme nous pouvons le voir, lorsque nous modifions n'importe quelle pièce, FullName sera recalculé et les résultats seront mis à jour.

Ensuite, nous créons une réf en volume et définissons un effet de montre. Chaque fois que le volume est modifié, l'effet exécutera la fonction de rappel. Pour prouver cela, dans la vue, nous ajoutons un bouton qui augmente le volume de 1. Nous définissons une condition dans la fonction de rappel pour tester si la valeur du volume peut être divisible par 3. Lorsqu'il revient vrai, un message d'alerte sera affiché. L'effet s'exécute une fois lorsque l'application démarre et définit la valeur du volume, puis exécute à nouveau chaque fois que la valeur du volume est modifiée.

Enfin, nous créons une référence d'état et définissons une fonction de montre pour suivre ses modifications. Une fois que l'état modifie, la fonction de rappel sera exécutée. Dans cet exemple, nous ajoutons un bouton pour basculer l'état entre le jeu et la pause. Chaque fois que cela se produit, un message d'alerte s'affiche.

watchffect and watch est très similaire en termes de fonctionnalité, mais ils ont des différences évidentes:

WatchEffect traite toutes les propriétés réactives contenues dans la fonction de rappel comme des dépendances. Par conséquent, si le rappel contient trois propriétés, toutes sont implicitement suivies pour les modifications.
regarder uniquement les propriétés que nous incluons comme paramètres dans le rappel. De plus, il fournit les valeurs précédentes et actuelles de l'attribut de surveillance.

Comme vous pouvez le voir, l'API réactive Vue 3 fournit un large éventail de méthodes qui peuvent être utilisées dans une variété de cas d'utilisation. L'API est très grande, et dans ce tutoriel, j'explore uniquement les bases. Pour une exploration plus approfondie, des détails et des cas de bord, visitez la documentation API réactive.

Conclusion

Dans cet article, nous introduisons ce qu'est un système réactif et comment il peut être mis en œuvre dans les Vue 2 et Vue 3. Nous voyons que Vue 2 a résolu certaines lacunes avec succès dans Vue 3. Le mécanisme réactif de Vue 3 est une réécriture complète basée sur les capacités JavaScript modernes. Résumons ses avantages et ses inconvénients.

pros:

Il peut être utilisé comme un package autonome. Par exemple, vous pouvez l'utiliser avec React.
Il offre une plus grande flexibilité et fonctionnalité grâce à son API riche en fonctionnalités.
Il prend en charge plus de structures de données (map, faiblemap, set, faiblet).
Cela fonctionne mieux. Seules les données requises deviennent réactives.
Les considérations de fonctionnement des données dans Vue 2 ont été résolues.

Inconvénients:

Il n'est disponible que pour les navigateurs compatibles ES6.
En termes de comparaison d'identité (===), le proxy réactif n'est pas égal à l'objet d'origine.
Il nécessite plus de code que le mécanisme réactif "automatique" de Vue 2.

L'essentiel est que le mécanisme réactif de Vue 3 est un système flexible et puissant qui peut être utilisé par les développeurs VUE et non Vue. Quelle que soit votre situation, prenez-la et commencez à construire quelque chose d'incroyable.

Vue 3 Système réactif FAQ (FAQ)

Qu'est-ce qu'un système réactif Vue 3?

Vue 3 Le système réactif est un aspect fondamental de Vue.js, un cadre JavaScript populaire. Il est responsable du suivi des modifications de l'état d'application et de la mise à jour du DOM (modèle de document objet) pour refléter ces modifications. Le système est construit autour du concept d '"objets réactifs". Lorsque les propriétés de ces objets changent, Vue déclenchera automatiquement les mises à jour nécessaires. Cela permet aux développeurs de créer plus facilement des applications Web dynamiques et réactives.

En quoi le système réactif Vue 3 est-il différent de Vue 2?

Le système réactif de

Vue 3 a été complètement réécrit à l'aide de l'objet proxy de JavaScript, offrant un moyen plus efficace et puissant de suivre les changements par rapport à l'objet Vue 2.DefineProperty. Ce nouveau système permet à Vue de suivre les changements dans les propriétés imbriquées, une limitation de Vue 2. Il réduit également l'empreinte de la mémoire et améliore les performances.

Comment utiliser le système réactif Vue 3 dans mon application?

Pour utiliser le système réactif Vue 3, vous devez envelopper vos données à l'aide de la fonction réactive (). Cette fonction rend l'objet et ses propriétés réactives. Lorsque la propriété change, Vue remenma automatiquement les composants qui en dépendent. Vous pouvez également utiliser la fonction ref () pour rendre une seule variable réactive.

Quel est le rôle de la fonction REF dans le mécanisme réactif de Vue 3?

La fonction ref () dans

vue 3 est utilisée pour créer des références réactives aux valeurs. Il enveloppe la valeur dans un objet avec une seule propriété ".value" et rend cet objet réactif. Cela signifie que lorsque la valeur change, tout composant utilisant cette référence sera mis à jour.

Quelle est la différence entre réactive et ref dans Vue 3?

Reactive () et Ref () sont tous deux utilisés pour rendre les données sensibles à Vue 3, mais elles sont utilisées dans différents scénarios. La fonction réactive () est utilisée pour rendre un objet réactif, tandis que la fonction ref () est utilisée pour créer une valeur de base telle qu'une chaîne ou un nombre. Cependant, Ref () peut également être utilisé avec des objets, auquel cas il se comporte de manière similaire à réactif ().

vue 3 Comment gérer la réactivité d'un tableau?

vue 3 La réactivité des tableaux est la même que celles qui gèrent les objets. Si vous utilisez la fonction Reactive () pour rendre le tableau réactif, Vue Tracks modifie les éléments du tableau et leur longueur. Cela signifie que si vous ajoutez, supprimez ou remplacez les éléments, Vue mettra à jour les composants qui dépendent de ce tableau.

Quelle est la fonction TOREFS dans le mécanisme réactif?

La fonction torefs () dans Vue 3 est utilisée pour convertir un objet réactif en un objet normal, où chaque propriété de l'objet d'origine est représentée comme un réf. Ceci est utile lorsque vous souhaitez déconstruire un objet réactif, mais le gardez toujours réactif.

Comment empêcher les objets de Vue 3 d'être réactifs?

Vous pouvez utiliser la fonction markraw () pour empêcher l'objet d'être réactif. Ceci est utile dans certains cas où vous ne voulez pas que Vue suive les modifications de l'objet.

vue 3 Quelle est la fonction calculée du mécanisme réactif?

La fonction calculée () dans Vue 3 est utilisée pour créer une propriété réactive qui dépend d'autres propriétés réactives. La valeur de la propriété calculée est automatiquement mise à jour lorsque des dépendances changent. Ceci est très utile pour les calculs ou les transformations qui devraient être mis à jour lorsque les données sous-jacentes changent.

vue 3 Comment gérer la réactivité de la carte et de la définition?

Le système réactif de

Vue 3 prend en charge la carte de JavaScript et définit les structures de données. Si vous créez une carte ou définissez-vous, Vue suit les changements à ses entrées ou éléments, respectivement. Cela signifie que si vous ajoutez, supprimez ou remplacez une entrée ou un élément, Vue mettra à jour les composants qui dépendent de la carte ou de la définition.

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!