La fonction de surveillance est utilisée pour écouter les changements d'une certaine valeur. Lorsque la valeur change, la logique de traitement correspondante est déclenchée.
<template>
<div>
<div>{{ count }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import {ref,reactive, watch} from 'vue'
const count = ref(0)
function changCount(){
count.value++
}
watch(count,(newValue,oldValue)=>{
if(newValue){
console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
}
})
</script>
<style>
</style><template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
() => x.value + y.value,
(sum) => {
console.log(`我是x与y之和${sum}`);
}
);
</script>
<style>
</style><template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
[x,y],
([x,y]) => {
console.log(`我是x=>${x},我是y=》${y}`);
}
);
</script>
<style>
</style><template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(()=>obj.value.name,(name)=>{
console.log(name);
})
</script>
<style>
</style>est utilisé pour activer la surveillance approfondie
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true })
</script>
<style>
</style>Si la détection d'initialisation doit être activée, la méthode par défaut dans l'écouteur ne sera exécutée que lorsque la valeur change. exécuté après l'initialisation après activation immédiate une fois.
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
<style>
</style>Il est courant que les rappels des auditeurs utilisent exactement le même état réactif que la source. Par exemple :
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(obj.value,()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>Nous pouvons utiliser la fonction watchEffect pour simplifier le code ci-dessus. watchEffect() Nous permet de suivre automatiquement les dépendances réactives des rappels. L'écouteur ci-dessus peut être réécrit comme :
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// watch(obj.value,()=>{
// console.log(obj.value.name);
// })
watchEffect(()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>Remarque : il convient de noter que le rappel watchEffect sera exécuté immédiatement, pas besoin de spécifier immédiat
watch et watchEffect peuvent être exécutés de manière réactive et. avoir des effets secondaires de rappel. La principale différence entre eux réside dans la manière dont les dépendances réactives sont suivies :
watch ne suit que les sources de données qui sont explicitement écoutées. Il ne suivra rien de ce qui est accessible lors du rappel. De plus, le rappel n'est déclenché que lorsque la source de données change réellement. watch évitera de suivre les dépendances lorsque des effets secondaires se produisent, afin que nous puissions contrôler plus précisément le moment où la fonction de rappel est déclenchée.
watchEffect suivra les dépendances lors de l'apparition d'effets secondaires. Il suivra automatiquement toutes les propriétés réactives accessibles pendant la synchronisation. C'est plus pratique et le code a tendance à être plus propre, mais parfois ses dépendances réactives sont moins explicites.
Si vous souhaitez accéder au DOM mis à jour par Vue dans le rappel de l'écouteur, vous devez spécifier l'option flush: 'post' :
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})Arrêter l'écoute
Auditeurs créés avec des instructions synchrones dans setup() ou
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
Adresse du portefeuille Yiooke
Comment résoudre l'attente d'un appareil
Logiciel de création de site internet
Comment désinstaller la restauration en un clic
Il y a une page vierge supplémentaire dans Word et je ne parviens pas à la supprimer.
Quel logiciel est Xiaohongshu ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
