Dans cet article, nous ' Nous allons examiner la réactivité dans Vue, comment cela fonctionne et comment nous pouvons créer des variables réactives à l'aide de méthodes et de fonctions nouvellement créées. Cet article est destiné aux développeurs qui ont une bonne compréhension du fonctionnement de Vue 2.x et qui cherchent à se familiariser avec la nouvelle Vue 3 .
Nous allons créer une application simple pour mieux comprendre ce sujet. Le code de cette application est disponible sur GitHub .
Par défaut, JavaScript n'est pas réactif . Cela signifie que si nous créons la variable boy et la référençons dans la partie A de notre application, puis modifiez boy dans la partie B, la partie A ne sera pas mise à jour avec la nouvelle valeur de garçon .
let framework = 'Vue';
let phrase = `$ {framework} est génial`;
console.log (phrase)
// enregistre "Vue est génial"
framework = 'Réagir';
console.log (phrase)
// devrait consigner "React is awesome" si 'phrase' est réactive. L'extrait ci-dessus est un exemple parfait de la nature non réactive de JavaScript – d'où la raison pour laquelle le changement n'est pas reflété dans la phrase variable.
Dans Vue 2.x, les accessoires calculés et data () étaient tous réactifs par défaut, à l'exception de propriétés qui ne sont pas présentes dans les données lors de la création de tels composants. Cela signifie que lorsqu'un composant est injecté dans le DOM seules les propriétés existantes dans l'objet data du composant entraîneront la mise à jour du composant si et quand ces propriétés changent.
En interne, Vue 3 utilise l'objet Proxy (une fonctionnalité ECMAScript 6) pour s'assurer que ces propriétés sont réactives, mais il offre toujours la possibilité d'utiliser l'objet .defineProperty de Vue 2 pour la prise en charge d'Internet Explorer (ECMAScript 5). Cette méthode définit une nouvelle propriété directement sur un objet, ou modifie une propriété existante sur un objet, et renvoie l'objet.
À première vue et puisque la plupart d'entre nous savent déjà que la réactivité n'est pas nouvelle dans Vue, cela peut sembler inutile pour utiliser ces propriétés, mais l'API Options a ses limites lorsque vous avez affaire à une grande application avec des fonctions réutilisables dans plusieurs parties de l'application. À cette fin, la nouvelle Composition API a été introduite pour aider à la logique d'abstraction afin de rendre une base de code plus facile à lire et à maintenir. De plus, nous pouvons maintenant facilement rendre toute variable réactive quel que soit son type de données en utilisant l'une des nouvelles propriétés et méthodes.
Lorsque nous utilisons l'option setup qui sert de point d'entrée de l'API Composition, l'objet data les propriétés calculées et les méthodes sont inaccessibles car l'instance de composant n'a pas encore été créée lors de la configuration de est exécuté. Cela rend impossible de tirer parti de la réactivité intégrée dans l'une de ces fonctionnalités dans la configuration . Dans ce tutoriel, nous allons découvrir toutes les façons de faire cela.
La méthode réactive
D'après la documentation, la méthode réactive qui est l'équivalent de Vue.observable () dans Vue 2.6, peut être utile lorsque nous essayons de créer un objet dont toutes les propriétés sont réactives (comme l'objet data dans l'API Options). Sous le capot, l'objet data de l'API Options utilise cette méthode pour rendre réactives toutes ses propriétés.
Mais nous pouvons créer notre propre objet réactif comme ceci:
import {reactive } de 'vue'
// état réactif
laissez l'utilisateur = réactif ({
"id": 1,
"nom": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"adresse": {
"street": "Kulas Light",
"suite": "Apt. 556",
"ville": "Gwenborough",
"code postal": "92998-3874",
"geo": {
"lat": "-37,3159",
"lng": "81.1496"
}
},
"téléphone": "1-770-736-8031 x56442",
"site Web": "hildegard.org",
"compagnie": {
"nom": "Romaguera-Crona",
"catchPhrase": "Réseau neuronal client-serveur multicouche",
"bs": "exploiter les marchés électroniques en temps réel"
},
"voitures": {
"nombre": 0
}
}) Ici, nous avons importé la méthode réactive de Vue, puis nous avons déclaré notre variable user en passant sa valeur à cette fonction comme argument. Ce faisant, nous avons rendu user réactif, et, par conséquent, si nous utilisons user dans notre modèle et si l'objet ou une propriété de cet objet doit changer, alors ceci La valeur sera automatiquement mise à jour dans ce modèle.
ref
Tout comme nous avons une méthode pour rendre les objets réactifs, nous en avons également besoin pour rendre d'autres valeurs primitives autonomes (chaînes, booléens , valeurs non définies, nombres, etc.) et tableaux réactifs. Pendant le développement, nous travaillerions avec ces autres types de données tout en ayant besoin qu'ils soient réactifs. La première approche à laquelle nous pourrions penser serait d'utiliser reactive et de passer la valeur de la variable que nous voulons rendre réactive.
import {reactive} from 'vue'
état const = réactif ({
utilisateurs: [],
}); Parce que réactif a une conversion réactive profonde, utilisateur en tant que propriété serait également réactif, atteignant ainsi notre objectif; par conséquent, l'utilisateur mettrait toujours à jour partout où il est utilisé dans le modèle d'une telle application. Mais avec la propriété ref nous pouvons rendre réactive toute variable avec n'importe quel type de données en passant la valeur de cette variable à ref . Cette méthode fonctionne également pour les objets, mais elle imbrique l'objet d'un niveau plus profond que lorsque la méthode réactive est utilisée.
let property = {
chambres: '4 chambres',
garage: vrai,
SwimmingPool: faux
}
let reactiveProperty = ref (propriété)
console.log (propriété réactive)
// imprime {
// valeur: {rooms: "4 rooms", garage: true, swimmingPool: false}
//} Sous le capot, ref prend cet argument qui lui est passé et le convertit en un objet avec une clé de valeur . Cela signifie que nous pouvons accéder à notre variable en appelant variable.value et nous pouvons également modifier sa valeur en l'appelant de la même manière.
import {ref} depuis 'vue'
soit age = ref (1)
console.log (age.value)
// imprime 1
age.value ++
console.log (age.value)
// imprime 2 Avec cela, nous pouvons importer ref dans notre composant et créer une variable réactive:
Ici, nous avons importé ref afin de créer une variable réactive users dans notre composant. Nous avons ensuite importé axios pour récupérer les données d'un fichier JSON dans le dossier public et nous avons importé notre composant carsNumber que nous créerons plus tard. La prochaine chose que nous avons faite a été de créer une variable réactive users en utilisant la méthode ref afin que users puissent se mettre à jour chaque fois que la réponse de notre fichier JSON change. [19659006] Nous avons également créé une fonction getUser qui récupère le tableau users de notre fichier JSON en utilisant axios et nous avons attribué la valeur de cette requête au utilisateurs variable. Enfin, nous avons créé une propriété calculée qui calcule le nombre total de voitures que nos utilisateurs ont comme nous l'avons modifié dans la section template.
Il est important de noter que lors de l'accès aux propriétés ref qui sont retournées dans la section template ou en dehors de setup () ils sont automatiquement peu profonds déballés . Cela signifie que refs qui sont un objet nécessiterait toujours une .value pour y accéder. Comme users est un tableau, nous pourrions simplement utiliser users et non users.value dans getTotalCars .
Dans la section template , nous avons affiché un tableau qui affiche les informations de chaque utilisateur, ainsi qu'un composant . Ce composant accepte un accessoire cars qui est affiché dans la ligne de chaque utilisateur en tant que nombre de voitures dont il dispose. Cette valeur est mise à jour chaque fois que la valeur de voitures change dans l'objet utilisateur ce qui correspond exactement à la façon dont l'objet data ou la propriété calculée fonctionnerait si nous étions utilisation de l'API Options.
toRefs
Lorsque nous utilisons l'API Composition, la fonction setup accepte deux arguments: props et context ]. Cet accessoire est passé du composant à setup () et il permet d'accéder aux accessoires que le composant possède depuis cette nouvelle API. Cette méthode est particulièrement utile car elle permet la déstructuration d'objets sans perdre sa réactivité.
Pour utiliser une valeur qui est un objet de accessoires dans l'API de composition tout en garantissant qu'elle conserve sa réactivité, nous utilisons toRefs . Cette méthode prend un objet réactif et le convertit en un objet simple dans lequel chaque propriété de l'objet réactif original devient une ref . Cela signifie que les voitures prop…
voitures: {
nombre: 0
} … deviendrait maintenant ceci:
{
valeur: voitures: {
nombre: 0
} Avec cela, nous pouvons utiliser voitures dans n'importe quelle partie de l'API de configuration tout en conservant sa réactivité.
configuration (accessoires) {
let {voitures} = toRefs (accessoires);
console.log (cars.value);
// imprime {number: 0}
}, Nous pouvons observer cette nouvelle variable à l’aide de la montre de l’API Composition et réagir à ce changement comme bon nous semble.
setup (props) {
let {voitures} = toRefs (accessoires);
Regardez(
() => voitures,
(voitures, prevCars) => {
console.log ("profond", cars.value, prevCars.value);
},
{deep: true}
);
} toRef
Un autre cas d'utilisation courant auquel nous pourrions être confrontés est passant une valeur qui n'est pas nécessairement un objet mais plutôt l'un des types de données qui fonctionnent avec ref (tableau, nombre, chaîne, booléen, etc.). Avec toRef nous pouvons créer une propriété réactive (c'est-à-dire ref ) à partir d'un objet réactif source. Cela garantirait que la propriété reste réactive et serait mise à jour chaque fois que la source parente change.
const cars = reactive ({
Toyota: 1,
Honda: 0
})
const NumberOfHondas = toRef (état, 'Honda')
NumberOfHondas.value ++
console.log (état.Honda) // 1
état.Honda ++
console.log (NumberOfHondas.value) // 2 Ici, nous avons créé un objet réactif en utilisant la méthode réactive avec les propriétés Toyota et Honda . Nous avons également utilisé toRef pour créer une variable réactive à partir de Honda . D'après l'exemple ci-dessus, nous pouvons voir que lorsque nous mettons à jour Honda en utilisant soit l'objet réactif cars ou NumberOfHondas la valeur est mise à jour dans les deux cas. [19659006] Cette méthode est similaire et pourtant si différente de la méthode toRefs que nous avons abordée ci-dessus en ce sens qu'elle maintient sa connexion à sa source et peut être utilisée pour les chaînes, les tableaux et les nombres. Contrairement à toRefs nous n'avons pas à nous soucier de l'existence de la propriété dans sa source au moment de la création, car si cette propriété n'existe pas au moment où cette ref est créé et retourne à la place null il serait toujours stocké comme une propriété valide, avec une forme de watcher mis en place, de sorte que lorsque cette valeur change, cette ref créé en utilisant toRef serait également mis à jour.
Nous pouvons également utiliser cette méthode pour créer une propriété réactive à partir des accessoires . Cela ressemblerait à ceci:
Ici, nous avons créé une ref qui serait basée sur la propriété gender obtenue à partir des accessoires . Ceci est pratique lorsque nous voulons effectuer des opérations supplémentaires sur l'accessoire d'un composant particulier.
Conclusion
Dans cet article, nous avons examiné le fonctionnement de la réactivité dans Vue en utilisant certaines des méthodes et fonctions nouvellement introduites de Vue 3. Nous avons commencé par regarder ce qu'est la réactivité et comment Vue utilise l'objet Proxy dans les coulisses pour y parvenir. Nous avons également examiné comment créer des objets réactifs en utilisant réactif et comment créer des propriétés réactives en utilisant ref .
Enfin, nous avons examiné comment convertir des objets réactifs en objets simples, dont chacune des propriétés est une ref pointant vers la propriété correspondante de l'objet original, et nous avons vu comment créer une ref pour une propriété sur un objet source réactif.
En outre Ressources
Source link