mirar
(1) el reloj monitorea un dato
<template>
<div>
<input type="text" v-model="text" />
</div>
</template>
<script setup lang="ts">
import {
ref, watch } from 'vue'
let text = ref<String>('')
watch(text, (newV, oldV) => {
console.log('newV', newV, 'oldV', oldV)
})
</script>
<style lang="scss" scoped></style>
(2) el reloj monitorea múltiples datos y usa matrices
<template>
<div>
<input type="text" v-model="text" />
<input type="text" v-model="text2" />
</div>
</template>
<script setup lang="ts">
import {
ref, watch } from 'vue'
let text = ref<String>('')
let text2 = ref<String>('')
watch([text, text2], (newV, oldV) => {
console.log('newV', newV, 'oldV', oldV)
})
</script>
<style lang="scss" scoped></style>
(3) el reloj monitorea objetos de nivel profundo
- Al monitorear objetos profundos, los valores de los objetos nuevos y antiguos cambiarán.
- Utilice deep para un seguimiento profundo
- Utilice la vigilancia inmediata // para activar directamente por primera vez
(la vigilancia predeterminada no se activa por primera vez), luego configure el primer disparador
<template>
<div>
<input type="text" v-model="text.info.age" />
</div>
</template>
<script setup lang="ts">
import {
reactive, ref, watch } from 'vue'
let text = reactive({
info: {
age: 20,
},
})
watch(
text,
(newV, oldV) => {
console.log('newV', newV)
console.log('oldV', oldV)
},
{
deep: true, // 深层次监听
immediate: true, // watch 第一次直接触发 (默认watch第一次不触发的)
}
)
</script>
<style lang="scss" scoped></style>
(4) el reloj monitorea un cierto valor del objeto
<template>
<div>
<input type="text" v-model="text.info.age" />
<input type="text" v-model="text.info.name" />
</div>
</template>
<script setup lang="ts">
import {
reactive, ref, watch } from 'vue'
let text = reactive({
info: {
age: 20,
name: 'ppp',
},
})
watch(
() => text.info.age,
(newV, oldV) => {
console.log('newV', newV)
console.log('oldV', oldV)
}
)
</script>
<style lang="scss" scoped></style>
oyente avanzado watchEffect
- watchEffect no es diferido. Las dependencias se recopilaron al principio y se llamarán automáticamente una vez (watch es diferido)
- watchEffect solo puede obtener el último (watch puede obtener los valores nuevos y antiguos)
- watchEffect se ejecutará una vez durante la inicialización, similar a lo calculado, pero no se llamará a lo calculado si no se usa el valor, pero watchEffect siempre se llamará una vez
(1) La verificación no es perezosa
<template>
<div class="app-container home">
<el-input
v-model="num"
auto-complete="off"
placeholder="请输入验证码"
size="large"
class="yzm"
/>
<button @click="countAdd">点击</button>
</div>
</template>
<script setup name="Index">
const num = ref(0);
watch(num, (val) => {
//只有值改变才执行
console.log(val);
});
const countAdd = () => {
num.value++;
};
watchEffect(() => {
// 初始化和值改变都执行
console.log('新的值:', num.value);
});
</script>
(2)watchEffect deja de monitorear
Cuando se llama a watchEffect en la función setup() o en el enlace del ciclo de vida de un componente, el oyente se vincula al ciclo de vida del componente y se detiene automáticamente cuando se descarga el componente.
En algunos casos, el valor de retorno también se puede llamar explícitamente para dejar de escuchar.
<template>
<div>
<input type="text" v-model="text" />
<button @click="stop">停止监听</button>
</div>
</template>
<script setup lang="ts">
import {
reactive, ref, watch, watchEffect } from 'vue'
let text = ref<String>('小小')
// 非惰性的 一开始的时候 已经执行监听
const stopWatch = watchEffect((oninvalidata) => {
console.log('text', text.value)
oninvalidata(() => {
// 先执行的 清楚副作用
console.log('before')
})
})
// 停止监听
const stop = () => stopWatch()
</script>
<style lang="scss" scoped></style>
(3) Tiempo de ejecución de watchEffect
- antes de la actualización del componente;
- sincronización: fuerza que el efecto esté siempre sincronizado;
- post: ejecutado después de que se actualiza el componente
<template>
<div>
<input id="ipt" type="text" v-model="text" />
</div>
</template>
<script setup lang="ts">
import {
reactive, ref, watch, watchEffect } from 'vue'
let text = ref<String>('小小')
// 非惰性的 一开始的时候 已经执行监听
const stopWatch = watchEffect(
(oninvalidata) => {
console.log('text', text.value)
oninvalidata(() => {
// 先执行的 清楚副作用
console.log('before')
})
},
{
flush: 'post', // dom加载完毕后 执行
// pre 组件更新前； sync：强制效果始终同步； post：组件更新后执行
}
)
</script>
(4) Efectos secundarios del efecto reloj
¿Cuáles son los efectos secundarios?
Después de que se ejecuta una función, afecta su exterior.
Comprensión simple: si el código para solicitudes asincrónicas está escrito en watchEffect, cuando se llama a watchEffect varias veces, las solicitudes asincrónicas se ejecutarán repetidamente;
¿Efectos secundarios claros?
Puede utilizar el método onInvalidate para finalizar la solicitud anterior.
Ejemplo
Si no se procesa, la solicitud se enviará varias veces:
(5) Estado del depurador de watchEffect
<template>
<div>
<input id="ipt" type="text" v-model="text" />
<button @click="stop">停止监听</button>
</div>
</template>
<script setup lang="ts">
import {
reactive, ref, watch, watchEffect } from 'vue'
let text = ref<String>('小小')
// 非惰性的 一开始的时候 已经执行监听
const stopWatch = watchEffect(
(oninvalidata) => {
console.log('text', text.value)
// let ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement // (as HTMLInputElement 断点)
// console.log('ipt', ipt)
oninvalidata(() => {
// 先执行的 清楚副作用
console.log('before')
})
},
{
flush: 'post', // dom加载完毕后 执行
// pre 组件更新前； sync：强制效果始终同步； post：组件更新后执行
onTrigger(e) {
debugger // 用于debugger 调试
},
}
)
// 停止监听
const stop = () => stopWatch()
</script>
<style lang="scss" scoped></style>
La diferencia entre reloj y watchEffect
Funciones del reloj
La función de escucha del reloj puede agregar elementos de configuración o puede configurarse como vacía. Cuando el elemento de configuración está vacío, las características del reloj son:
- Lazy: cuando se ejecuta, no se ejecutará inmediatamente;
- Más específico: necesita agregar propiedades de monitoreo;
- El valor anterior del atributo accesible: el último valor y el valor antes de la modificación se devolverán en la función de devolución de llamada;
- Configurable: los elementos de configuración pueden complementar las deficiencias en las funciones de vigilancia:
inmediato: configura si el atributo de vigilancia se ejecuta inmediatamente. Cuando el valor es verdadero, se ejecutará inmediatamente una vez que se ejecute. Cuando el valor es falso, permanece inerte.
profundo: Configure el reloj para monitorear profundamente. Cuando el valor es verdadero, se pueden monitorear todas las propiedades del objeto. Cuando el valor es falso, se mantienen características más específicas y deben especificarse en propiedades específicas.
Características del efecto reloj
- No diferido: una vez ejecutado, se ejecutará inmediatamente;
- Más abstracto: no es necesario especificar quién está escuchando cuando lo usa, simplemente úselo directamente en la función de devolución de llamada;
- No se puede acceder al valor anterior: solo se puede acceder al valor más reciente y no se puede acceder al valor anterior a la modificación;