Analyse des exemples d'utilisation de watch et watchEffect dans vue3

watch

watch surveille une seule donnée

<template>
    <input type="text" v-model="text1" />
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;
const text1 = ref(&#39;&#39;)

watch(text1, (newVal, oldVal) => {
    console.log(&#39;监听单个数据&#39;, newVal, oldVal)
})
</script>

watch surveille plusieurs données

<template>
    <input type="text" v-model="text1" />
    <input type="text" v-model="text2" />
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;
const text1 = ref(&#39;&#39;)
const text2 = ref(&#39;&#39;)

watch([text1, text2], (newVal, oldVal) => {
    console.log(&#39;监听一组数据&#39;, newVal, oldVal)
})
</script>

watch surveille l'objet

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />
</template>
<script setup>
import { reactive, watch } from &#39;vue&#39;
const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watch(student, (newVal, oldVal) => {
    console.log(&#39;newVal&#39;, newVal)
    console.log(&#39;oldVal&#39;, newVal)
})
</script>

watch a également un troisième paramètre, deep</ code > et <code>immédiat, vous pouvez l'ajouter pour voir l'effetwatch还有第三个参数，deep和immediate，可以加上看看效果

watch监听对象的某一个值

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />
</template>
<script lang="ts" setup>
import { reactive, watch } from &#39;vue&#39;
const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watch(() => student.name, (newVal, oldVal) => {
    console.log(&#39;newVal&#39;, newVal)
    console.log(&#39;oldVal&#39;, newVal)
}, {
    deep: true,
    immediate: true
})
</script>

监听对象某一个属性的时候需要用箭头函数

watchEffect

关于watchEffect，官网是这么介绍的：为了根据响应式状态自动应用和重新应用副作用，我们可以使用watchEffect方法，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。 也就是说，我们并不需要传入一个特定的依赖源，而且它会立即执行一遍回调函数，如果函数产生了副作用，那它就会自动追踪副作用的依赖关系，自动分析出响应源。光看概念可能比较模糊，先来看个最简单的例子：

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />
</template>

<script lang="ts" setup>
import { reactive, watchEffect } from &#39;vue&#39;

const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watchEffect(() => {
    console.log(&#39;name: &#39;,student.name, &#39;age: &#39;, student.age)
})
</script>

watchEffect副作用

副作用，那什么是副作用呢，其实很简单，就是在监听之前，我得做一件事。

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />

    <h3>{{student.name}}</h3>
</template>

<script lang="ts" setup>
import { reactive, watchEffect } from &#39;vue&#39;

const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watchEffect((oninvalidate) => {
    oninvalidate(() => {
        student.name = &#39;张三&#39;
    })
    console.log(&#39;name: &#39;, student.name)
}, {
    // pre 组件更新前； sync：强制效果始终同步； post：组件更新后执行
    flush: &#39;post&#39;  // dom加载完毕后执行
})
</script>

监听之前让student.name赋值为'张三'，无论你输入什么值，name一直都是'张三'

停止监听

我们用同步语句创建的监听器，会自动绑定到组件实例上，并且会在组件卸载时自动停止，但是，如果我们在异步回调里创建一个监听器，那它就不会绑定到当前组件上，必须手动去停止，防止内存泄漏。 那怎么去停止呢，其实我们只需要调用一下watch或watchEffect返回的函数

const stop = watchEffect(() => {})

// 停止监听
unwatch()

区别

用了一遍watch和watchEffect之后，发现他俩主要有以下几点区别：

• watch是惰性执行的，而watchEffect不是，不考虑watch第三个配置参数的情况下，watch在组件第一次执行的时候是不会执行的，只有在之后依赖项变化的时候再执行，而watchEffect是在程序执行到此处的时候就会立即执行，而后再响应其依赖变化执行。

• watch需要传递监听的对象，watchEffect

  la montre surveille une certaine valeur de l'objet
rrreee

Lors de la surveillance d'un certain attribut de l'objet, vous devez utiliser la flèche function 🎜🎜 watchEffect🎜🎜À propos de watchEffect, le site officiel le présente ainsi : Afin d'appliquer et de réappliquer automatiquement les effets secondaires en fonction de l'état de réponse, nous pouvons utiliser la fonction watchEffect, qui exécute immédiatement la fonction A entrante qui suit de manière réactive ses dépendances et réexécute la fonction lorsque ses dépendances changent. En d'autres termes, nous n'avons pas besoin de transmettre une source de dépendance spécifique, et elle exécutera immédiatement la fonction de rappel si la fonction produit des effets secondaires, elle suivra automatiquement les dépendances des effets secondaires et analysera automatiquement la source de réponse. Le concept peut être vague rien qu'en le regardant. Jetons d'abord un coup d'œil à l'exemple le plus simple : 🎜rrreee🎜watchEffect Side Effect🎜🎜Side Effect, alors qu'est-ce qu'un effet secondaire, c'est en fait très simple, c'est-à-dire avant ? surveillance, je dois faire une chose. 🎜rrreee🎜Attribuez student.name à 'Zhang San' avant la surveillance. Quelle que soit la valeur que vous entrez, name sera toujours 'Zhang San'🎜🎜Arrêtez la surveillance🎜🎜. L'écouteur que nous créons à l'aide d'une instruction synchrone sera automatiquement lié à l'instance du composant et s'arrêtera automatiquement lorsque le composant sera déchargé. Cependant, si nous créons un écouteur dans un rappel asynchrone, il ne sera pas lié au composant actuel. doit être arrêté manuellement pour éviter les fuites de mémoire. Alors comment l'arrêter ? En fait, il suffit d'appeler la fonction renvoyée par watch ou watchEffect🎜rrreee🎜La différence🎜🎜utilise watch et Après watchEffect, j'ai trouvé qu'ils présentent les principales différences suivantes : 🎜

• 🎜watch est exécuté paresseusement . Mais watchEffect ne l'est pas. Sans tenir compte du troisième paramètre de configuration de watch, watch ne sera pas exécuté lorsque le composant est exécuté pour la première fois. , il ne sera exécuté que lorsque les dépendances changeront ultérieurement, tandis que watchEffect sera exécuté immédiatement lorsque le programme sera exécuté ici, puis exécuté en réponse aux modifications de ses dépendances. 🎜🎜
• 🎜watch doit transmettre l'objet de surveillance, watchEffect n'a pas besoin de le faire 🎜🎜🎜

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!