Comment utiliser la montre dans Vue3

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.

1. Instance de base de watch

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import {ref,reactive, watch} from &#39;vue&#39;
const count = ref(0)
function changCount(){
  count.value++
}
watch(count,(newValue,oldValue)=>{
  if(newValue){
    console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
  }
})
</script>
 
<style>
 
</style>

2. Watch surveille plusieurs données

fonction getter :

<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>

Un tableau composé de plusieurs sources

<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>

3 La valeur de l'objet de surveillance watch

<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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(()=>obj.value.name,(name)=>{
  console.log(name);
})
</script>
 
<style>
</style>

4. Le paramètre de configuration

1.deep

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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true })
</script>
 
<style>
</style>

2.immediate

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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
 
<style>
</style>

5. Simplifiez la surveillance via watchEffect()

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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// 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

6 watch vs. watchEffect

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.

7. Mécanisme de déclenchement du rappel et arrêt de l'écouteur

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 5101c0cdbdc49998c642c71f6b6410a8 sont automatiquement liés à l'instance du composant hôte et s'arrêteront automatiquement lorsque le composant hôte est désinstallé. Par conséquent, dans la plupart des cas, vous n’avez pas à vous soucier d’arrêter un auditeur.

Un point clé est que l'écouteur doit être créé avec une instruction synchrone : si vous créez un écouteur avec un rappel asynchrone, alors il ne sera pas lié au composant actuel et vous devez l'arrêter manuellement pour éviter les fuites de mémoire. À titre d'exemple ci-dessous :

// ...当该侦听器不再需要时
unwatch()

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!