Maison >interface Web >Voir.js >Analyse des exemples d'utilisation de watch et watchEffect dans vue3
<template> <input type="text" v-model="text1" /> </template> <script setup> import { ref, watch } from 'vue' const text1 = ref('') watch(text1, (newVal, oldVal) => { console.log('监听单个数据', newVal, oldVal) }) </script>
<template> <input type="text" v-model="text1" /> <input type="text" v-model="text2" /> </template> <script setup> import { ref, watch } from 'vue' const text1 = ref('') const text2 = ref('') watch([text1, text2], (newVal, oldVal) => { console.log('监听一组数据', newVal, oldVal) }) </script>
<template> name: <input type="text" v-model="student.name" /> age: <input type="number" v-model="student.age" /> </template> <script setup> import { reactive, watch } from 'vue' const student = reactive({ name: '', age: '' }) watch(student, (newVal, oldVal) => { console.log('newVal', newVal) console.log('oldVal', 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
,可以加上看看效果
<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 'vue' const student = reactive({ name: '', age: '' }) watch(() => student.name, (newVal, oldVal) => { console.log('newVal', newVal) console.log('oldVal', newVal) }, { deep: true, immediate: true }) </script>
监听对象某一个属性的时候需要用箭头函数
关于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 'vue' const student = reactive({ name: '', age: '' }) watchEffect(() => { console.log('name: ',student.name, 'age: ', student.age) }) </script>
副作用,那什么是副作用呢,其实很简单,就是在监听之前,我得做一件事。
<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 'vue' const student = reactive({ name: '', age: '' }) watchEffect((oninvalidate) => { oninvalidate(() => { student.name = '张三' }) console.log('name: ', student.name) }, { // pre 组件更新前; sync:强制效果始终同步; post:组件更新后执行 flush: 'post' // dom加载完毕后执行 }) </script>
监听之前让student.name
赋值为'张三',无论你输入什么值,name
一直都是'张三'
我们用同步语句创建的监听器,会自动绑定到组件实例上,并且会在组件卸载时自动停止,但是,如果我们在异步回调里创建一个监听器,那它就不会绑定到当前组件上,必须手动去停止,防止内存泄漏。 那怎么去停止呢,其实我们只需要调用一下watch
或watchEffect
返回的函数
const stop = watchEffect(() => {}) // 停止监听 unwatch()
用了一遍watch
和watchEffect
之后,发现他俩主要有以下几点区别:
watch
是惰性执行的,而watchEffect
不是,不考虑watch
第三个配置参数的情况下,watch
在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而watchEffect
是在程序执行到此处的时候就会立即执行,而后再响应其依赖变化执行。
watch
需要传递监听的对象,watchEffect
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!