El reloj de Vue3 es una función que puede recibir tres parámetros: el primer parámetro es el atributo monitoreado, el segundo parámetro es la función de devolución de llamada que recibe el valor nuevo y el valor anterior, y el tercer parámetro es el elemento de configuración.
<script setup>
import {
watch, ref, reactive } from 'vue'
props: ['info'],
const data = reactive({
name:'Watch',
age: 18,
height: 180,
children: [],
money:10
})
// 监听 props属性
watch(
()=>props,
(val) => {
if (!val) {
return
}
data.money=props.info.money
data.height=props.info.money
}
)
// 监听其他属性、路由或者状态管理的都这样
watch(
() => data.age,
(newAge, oldAge) => {
... }
)
// 监听多个属性，数组放多个值，返回的新值和老值也是数组形式
watch([data.age, data.money], ([newAge, newMoney], [oldAge, oldMoney]) => {
... })
// 第三个参数是一个对象，为可配置项，有5个可配置属性
watch(data.children, (newList, oldList) => {
... }, {
// 这两个和 Vue2 一样，没啥说的
immediate: true,
deep: true,
// 回调函数的执行时机，默认在组件更新之前调用。更新后调用改成post
flush: 'pre', // 默认值是 pre，可改成 post 或 sync
// 下面两个是调试用的
onTrack (e) {
debugger }
onTrigger (e) {
debugger }
})
</script>
Con respecto a los efectos secundarios
, la función de devolución de llamada del reloj puede recibir el tercer parámetro onInvalidate. Es una función para borrar los efectos secundarios. La función de devolución de llamada (manejador) que activa el oyente por primera vez no ejecutará onInvalidate. Después de eso, se ejecutará onInvalidate de forma predeterminada cada vez que se activa, lo que significa que se ejecutará de forma predeterminada
. El mecanismo se llama antes de la actualización. Por ejemplo, en el siguiente código, cuando la clave activa la actualización, se imprimirá 222 primero y luego el reloj. se imprimirá. Si es necesario llamarlo después de la actualización, puede agregar flush: post en el tercer elemento de configuración de watch.
// 回调函数接收一个参数，为清除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {
console.log('Watch')
// 获取DOM默认获取到的是更新前的dom，如果是flush: post，可以获取到更新后的dom
console.log('DOM节点：', dom.innterHTML)
onInvalidate(() => {
console.log(2222)
})
})
El escenario de uso de onInvalidate es: por ejemplo, hay algunas operaciones asincrónicas en la función de devolución de llamada de escucha (controlador). Cuando el reloj se activa nuevamente, puede usarlo para cancelar / ignorar / restablecer / inicializar ciertas operaciones en el asincrónico previamente inacabado. tareas Por ejemplo, cancelar la solicitud incompleta cuando se activó la vigilancia por última vez.
Nota :
// 配置immediate参数，立即执行，以及深层次监听
watch(data , (newValue, oldValue) => {
// 回调函数
console.log('触发监控更新了new', newValue);
console.log('触发监控更新了old', oldValue);
}, {
immediate: true,
deep: true
})
Si se definen datos reactivos y desea utilizar la vigilancia para monitorear los cambios de datos, el valor anterior no se puede obtener correctamente, la configuración del atributo profundo no es válida y se fuerza automáticamente a activar el monitoreo profundo.
Si usa ref para inicializar un objeto o datos de tipo matriz, se convertirá automáticamente a una implementación reactiva y se generará un objeto proxy. También será imposible obtener el valor anterior correctamente.
Si los datos generados de alguna manera son un objeto proxy, el valor anterior no se puede obtener correctamente en la devolución de llamada de observación al observar este objeto.
Entonces, cuando usas watch para monitorear un objeto, si no necesitas usar el valor anterior, puedes monitorear el objeto normalmente, pero si necesitas usar el valor anterior en la función de cambio de monitoreo, solo puedes monitorear el objeto. Atributo .xxx.
watchEffect
La función watchEffect en Vue 3 es una función de efecto secundario receptiva y su principio se puede dividir en dos etapas.
Fase de inicialización : en la fase de inicialización, Vue 3 convertirá los datos receptivos pasados a watchEffect en un objeto Pro a través de la función reactiva. El objeto Pro puede interceptar operaciones de acceso y modificación de datos receptivos y notificar códigos de efectos secundarios relevantes cuando los datos cambian. Después de la fase de inicialización, el código del efecto secundario se ejecutará inmediatamente, lo que garantiza que se realice un seguimiento del valor de los datos de respuesta antes de la primera llamada de watchEffect.
Fase de ejecución : en la fase de ejecución, Vue 3 empaquetará el código de efectos secundarios en una función y administrará esta función como una función de efectos secundarios del componente actual. Esta función de efecto secundario se ejecutará cuando se renderice el componente. Durante la ejecución, el objeto Pro recopila el acceso a datos reactivos, estableciendo así dependencias entre los datos y los efectos secundarios. Cuando los datos de respuesta cambian, el objeto Pro activará una actualización de dependencia, notificando así que el código de efecto secundario relevante se volverá a ejecutar.
Además de mirar, Vue3 también agrega un efecto de reloj. La diferencia es:
watch es para monitorear uno o más valores pasados, y no se ejecutará por primera vez de manera predeterminada. Solo se ejecutará cuando el valor monitoreado cambie. Cuando se activa, se devolverán el nuevo valor y el valor anterior. watchEffect se usa cada vez que se carga el código
. watchEffect se ejecutará y no es necesario pasar el contenido de monitoreo. Recopilará automáticamente las fuentes de datos dentro de la función como dependencias. Cuando las dependencias cambien, la función se restablecerá -ejecutado (un poco como calculado), y no se devolverán valores nuevos ni antiguos.
En circunstancias normales, ambos dejarán de monitorear automáticamente después de que el componente se destruya o desinstale, pero hay excepciones. Por ejemplo, en el método asincrónico, el monitoreo creado en setTimeout debe detenerse manualmente. El método de detención es el siguiente
// 监听方法赋值
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {
})
// 需要停止监听的时候，手动调用停止监听
unwatch()
unwatchEffect()
Cómo utilizar efecto reloj
<script setup>
import {
watchEffect } from 'vue'
// 正常使用
watchEffect(() => {
// 会自动收集这个函数使用到的属性作为依赖，进行监听
// 监听的是 userInfo.name 属性，不会监听 userInfo
console.log(userInfo.name)
// 如果是console.log(userInfo),就只会首次加载触发，
//因为监控了整个对象，对象里面的值变化不会触发
})
// 有两个参数，参数一是触发监听回调函数，参数二是可选配置项
watchEffect(() => {
...}, {
// 这里是可配置项，意思和 watch 是一样的，不过这只有3个可配置的
flush: 'pre',
//onTrack 将在响应式 property 或 ref 作为依赖项被追踪时被调用。
//onTrigger 将在依赖项变更导致副作用被触发时被调用。
onTrack (e) {
debugger }
onTrigger (e) {
debugger }
})
// 回调函数接收一个参数，为清除副作用的函数，和 watch 的同理
watchEffect(onInvalidate => {
console.log('watchEffect')
onInvalidate(() => {
console.log(2222)
})
})
//比如：
watchEffect(onInvalidate => {
const token = getUserInfo(id) // 获取用户信息
onInvalidate(() => {
//id已更改或观察程序已停止。使以前挂起的异步操作无效
token.cancel()
})
})
watchEffect Si necesita modificar el elemento de configuración para publicar o sincronizar, puede usar el alias directamente, de la siguiente manera
watchEffect(() => {
...}, {
flush: 'post',
})
// 和下面这个是一样的
watchPostEffect(() => {
})
-----------------------------
watchEffect(() => {
...}, {
flush: 'sync',
})
// 和下面这个是一样的
watchSyncEffect(() => {
})
Esto está escrito al final. Bienvenidos a todos a dejar comentarios y correcciones ~