Propriétés Watch de Vue3
Dans ce chapitre, nous présenterons les propriétés watch de Vue3watch, nous pouvons utiliserwatchpour répondre aux changements de données.
watchIl est utilisé pour surveiller les changements de propriétés réactives et exécuter des opérations spécifiques lorsque les propriétés changent. C'est un mécanisme réactif de Vue qui vous permet de réagir en conséquence lorsque les données changent et d'exécuter une logique personnalisée.
watchIl offre davantage de flexibilité lorsque les propriétés réactives changent, permettant à vos composants de mieux répondre aux changements de données et d'exécuter la logique correspondante.
L'exemple suivant implémente un compteur en utilisant watch :
Exemple
<p style = "font-size:25px;">Compteur: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Cliquez-moi</button>
</div>
<script>
const app = {
data() {
return {
counter: 1
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
alert('Changement de valeur du compteur :' + oval + ' changé en ' + nval + '!');
});
</script>
Essayez-le vous-même »
L'exemple suivant effectue une conversion entrekilomètresetmètres:
Exemple
Kilomètres: <input type = "text" v-model = "kilometers" @focus="currentlyActiveField = 'kilometers'">
Riz: <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'">
</div>
<p id="info"></p>
<script>
const app = {
data() {
return {
kilometers : 0,
meters:0
}
},
watch : {
kilometers:function(newValue, oldValue) {
// Vérifier s'il s'agit du champ de saisie actuel
if (this.currentlyActiveField === 'kilometers') {
this.meters = newValue * 1000
}
},
meters : function (newValue, oldValue) {
// Vérifier s'il s'agit du champ de saisie actuel
if (this.currentlyActiveField === 'meters') {
this.kilometers = newValue/ 1000;
}
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('kilometers', function (newValue, oldValue) {
// Ce rappel sera appelé après que vm.kilometers change
document.getElementById ("info").innerHTML = "Valeur avant changement : " + oldValue + ", valeur après changement : " + newValue;
})
</script>
Essayez-le vous-même »
Cliquez sur le bouton « Essayez-le vous-même » pour voir l'exemple en ligne.
Dans le code ci-dessus, nous avons créé deux champs de saisie. Dans la propriété data, les valeurs initiales de kilometers et meters sont toutes deux 0. L'objet watch crée deux méthodes de surveillance pour l'objet data : kilometers et meters.
Lorsque nous saisissons des données dans le champ de saisie, watch surveillera les changements de données en temps réel et modifiera sa propre valeur. Vous pouvez regarder la démonstration vidéo ci-dessous :
Utilisation de watch dans le chargement asynchrone
Pour charger des données asynchrones, Vue fournit une méthode plus générale via l'option watch pour répondre aux changements de données.
L'exemple suivant utilise la bibliothèque axios, qui sera présentée en détail plus tard.
Exemple
<!--ces fonctionnalités afin de rester léger. Cela vous permet également de choisir librement les outils qui vous sont plus familiers.-->
<script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: 'Chaque question doit se terminer par un point d'interrogation.'
}
},
watch: {
// Chaque fois que la question change, cette fonction s'exécutera, exigeant que la question se termine par un point d'interrogation, compatible avec le chinois et l'anglais ?
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = 'Chargement...'
axios
.get('/try/ajax/json_vuetest.php')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Erreur ! Impossible d'accéder à l'API. ' + error
})
}
}
}).mount('#watch-example')
</script>
Essayez-le vous-même »
Résumé d'utilisation
watch est un mécanisme d'observation de données réactives fourni par Vue 3, qui peut observer une ou plusieurs propriétés.
Vous pouvez gérer les changements de données en passant une fonction de rappel, avec la prise en charge d'options telles que l'observation profonde et l'exécution immédiate.
1. Utilisation de base
Dans Vue 3, la fonction watch est utilisée pour observer les propriétés réactives.
Lorsque la valeur de la propriété observée change, Vue déclenche l'exécution de la fonction de rappel.
Exemple
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count, // La propriété observée
(newVal, oldVal) => { // La fonction de rappel lorsqu'elle change
console.log(`count a changé de ${oldVal} à ${newVal}`);
}
);
return {
state
};
}
};
2. Surveillance de plusieurs propriétés réactives
Si vous souhaitez surveiller plusieurs propriétés réactives en même temps, vous pouvez passer un tableau contenant les propriétés à surveiller :
Exemple
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue3'
});
watch(
[() => state.count, () => state.name], // Surveillance de plusieurs propriétés
([newCount, newName], [oldCount, oldName]) => {
console.log(`count a changé de ${oldCount} à ${newCount}`);
console.log(`name a changé de ${oldName} à ${newName}`);
}
);
return {
state
};
}
};
3. Surveillance profonde
Si ce que vous souhaitez surveiller est un objet ou un tableau, et que vous souhaitez surveiller ses propriétés imbriquées, vous pouvez utiliser l'optiondeep: true. Cela surveillera toutes les modifications de propriétés de l'objet.
Exemple
export default {
setup() {
const state = reactive({
user: {
name: 'Alice',
age: 25
}
});
watch(
() => state.user, // Surveiller l'objet entier
(newVal, oldVal) => {
console.log('User object changed:', newVal, oldVal);
},
{ deep: true } // Activer la surveillance profonde
);
return {
state
};
}
};
4. Exécution immédiate
Par défaut, watch ne déclenche la fonction de rappel que lorsque la valeur surveillée change. Si vous souhaitez que la fonction de rappel s'exécute immédiatement au chargement du composant, vous pouvez définirimmediate: true。
Exemple
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count, // Surveiller la propriété
(newVal, oldVal) => {
console.log(`count a changé de ${oldVal} à ${newVal}`);
},
{ immediate: true } // Exécution immédiate
);
return {
state
};
}
};
5. Opérations asynchrones
Si vous devez effectuer des opérations asynchrones dans watch, vous pouvez utiliser directement async et await dans la fonction de rappel, ce qui vous permet de gérer des opérations telles que les requêtes API, le stockage de données, etc.
Exemple
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count,
async (newVal, oldVal) => {
console.log(`count a changé de ${oldVal} à ${newVal}`);
// Supposons qu'une requête asynchrone soit effectuée
await fetch(`https://api.example.com/count/${newVal}`);
}
);
return {
state
};
}
};
6. Surveiller plusieurs propriétés et utiliser la fonction handler
Vous pouvez également utiliser watch comme gestionnaire pour surveiller plusieurs propriétés, comme ceci :
Exemple
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue3'
});
const handler = ([newCount, newName], [oldCount, oldName]) => {
console.log(`count modifié: ${oldCount} → ${newCount}`);
console.log(`name modifié: ${oldName} → ${newName}`);
};
watch([() => state.count, () => state.name], handler);
return {
state
};
}
};
7. watchEffect - Surveillance simplifiée
Vue 3 fournit également l'API watchEffect, qui est plus concise que watch. Elle peut suivre automatiquement les changements dans les données réactives sans avoir besoin de spécifier une source de données spécifique.
Exemple
export default {
setup() {
const state = reactive({
count: 0
});
watchEffect(() => {
console.log(`count est: ${state.count}`);
});
return {
state
};
}
};
watchEffect détectera automatiquement les changements destate.countet déclenchera la fonction de rappel lorsque des changements se produisent.
8. L'option flush
L'option flush est utilisée pour contrôler le moment d'exécution des callbacks de watch.
Par défaut, les callbacks de watch s'exécutent après la mise à jour du DOM. Si vous devez exécuter le callback avant la mise à jour, vous pouvez utiliserflush: 'pre'。
Exemple
export default {
setup() {
const state = reactive({
count: 0
});
watch(
() => state.count,
(newVal, oldVal) => {
console.log(`count a changé de ${oldVal} à ${newVal}`);
},
{ flush: 'pre' } // Exécuter le callback avant la mise à jour
);
return {
state
};
}
};