VueJS - Propriétés Calculées : Un Guide Pour Débutants

Salut là, future superstar de Vue.js ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des Propriétés Calculées dans Vue.js. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je serai votre guide amical, et nous avancerons pas à pas. À la fin de ce tutoriel, vous serez étonné de voir combien vous avez appris !

Qu'est-ce que les Propriétés Calculées ?

Imaginez que vous cuisinez un gâteau. Vous avez des ingrédients (données), et vous suivez une recette (logique) pour créer quelque chose de délicieux (propriété calculée). Dans Vue.js, les propriétés calculées sont comme des recettes magiques de gâteau qui se mettent à jour automatiquement lorsque leurs ingrédients changent !

Commençons par un exemple simple :

<template>
<div>
<p>Prénom: {{ firstName }}</p>
<p>Nom de famille: {{ lastName }}</p>
<p>Nom complet: {{ fullName }}</p>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>

Dans cet exemple, fullName est notre propriété calculée. C'est comme une recette intelligente qui combine firstName et lastName pour nous donner un nom complet. La meilleure partie ? Chaque fois que firstName ou lastName change, fullName se met à jour automatiquement !

Pourquoi utiliser les Propriétés Calculées ?

1. Simplicité : Elles gardent votre modèle propre et facile à lire.
2. Performance : Vue met en cache le résultat et ne le recompute que lorsque les dépendances changent.
3. Fiabilité : Elles se mettent à jour automatiquement lorsque leurs dépendances changent.

Propriétés Calculées vs Méthodes

"Attendez," pourriez-vous dire, "ne pourrions-nous pas utiliser une méthode à la place ?" Excellent question ! Comparons :

<template>
<div>
<p>Calculé : {{ reversedMessage }}</p>
<p>Méthode : {{ reverseMessage() }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

tReversedMessage et reverseMessage() font la même chose. Mais voici le secret : les propriétés calculées sont mises en cache. Si message ne change pas, reversedMessage ne se recalculera pas. C'est comme avoir un assistant super-efficient qui se souvient des résultats précédents !

Propriétés Calculées avec Dépendances

Les propriétés calculées brillent lorsqu'elles dépendent de multiples pieces de données. Jetons un coup d'œil à un exemple plus complexe :

<template>
<div>
<input v-model="searchQuery" placeholder="Rechercher todos">
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
searchQuery: '',
todos: [
{ id: 1, text: 'Apprendre Vue', completed: false },
{ id: 2, text: 'Construire une application', completed: true },
{ id: 3, text: 'Maîtriser les propriétés calculées', completed: false }
]
}
},
computed: {
filteredTodos() {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>

Ici, filteredTodos est comme un filtre intelligent. Il surveille à la fois todos et searchQuery. Lorsque l'un ou l'autre change, il met à jour la liste automatiquement. Magique, n'est-ce pas ?

Get/Set dans les Propriétés Calculées

Maintenant, levons le niveau ! Les propriétés calculées peuvent avoir à la fois un getter et un setter. C'est comme avoir une recette à double sens - vous pouvez lire le résultat et modifier les ingrédients !

<template>
<div>
<p>Nom Complet: {{ fullName }}</p>
<button @click="changeFullName">Changer le Nom</button>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
methods: {
changeFullName() {
this.fullName = 'Jane Smith'
}
}
}
</script>

Dans cet exemple, fullName n'est pas seulement une recette (getter) mais aussi une recette inverse (setter). Lorsque nous changeons fullName, il met automatiquement à jour firstName et lastName. C'est comme avoir une potion magique de changement de nom !

Méthodes dans les Propriétés Calculées

Terminons avec un tableau des méthodes courantes que vous pouvez utiliser dans les propriétés calculées :

Méthode	Description	Exemple
filter()	Crée un nouveau tableau avec les éléments qui passent un test	this.items.filter(item => item.price > 100)
map()	Crée un nouveau tableau en transformant chaque élément	this.items.map(item => item.name.toUpperCase())
reduce()	Réduit un tableau à une seule valeur	this.items.reduce((total, item) => total + item.price, 0)
sort()	Trie les éléments du tableau	this.items.sort((a, b) => a.price - b.price)
includes()	Vérifie si un tableau contient un certain élément	this.items.includes('apple')
find()	Retourne le premier élément qui passe un test	this.items.find(item => item.id === 3)

Souvenez-vous, ces méthodes ne modifient pas le tableau original, ce qui est parfait pour les propriétés calculées !

Et voilà, mes apprenants enthousiastes ! Vous venez de maîtriser l'art des propriétés calculées dans Vue.js. De simples calculs aux filtres complexes, vous avez maintenant le pouvoir de rendre vos applications Vue plus intelligentes et plus efficaces. Continuez à pratiquer, continuez à coder, et surtout, continuez à vous amuser avec Vue !

Credits: Image by storyset