vue3API--watchEffect vue.js

watchEffect 函数

【vue3API--watchEffect】官网介绍watchEffect

graph LR A[watchEffect函数] -->B[概念] B-->B1(watchEffect是什么?) A-->C[主要特点] C-->|1|C1(立即执行) C1-->C11(谁立即执行?) C-->|2|C2(响应式追踪依赖) C-->|3|C3(停止侦听) C3-->C31(怎么停止?) C3-->C32(在什么时候停止?) C-->|4|C4(清除副作用) C-->|5|C5(附加options) C5-->C51(选项值 pre) C51-->C511(有什么影响?) C5-->C52(选项值 post) C52-->C521(有什么影响?) C-->|6|C6(侦听调试) C6-->C61(onTrack) C6-->C62(onTrigger)

watchEffect 概念

watchEffect是一个函数，它接受一个立即执行函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。官网概念

watchEffect 特点

一立即执行

watchEffect 的回调函数会 立即执行
组件初始化时立即执行

二响应式追踪依赖（数据）

如下代码: 每一次age的值发生变化时，都会被watchEffect所收集，并且 watchEffect 的回调函数会立即执行。

let age = ref(5); setTimeout(() => { age.value = https://www.it610.com/article/6; }, 1000); setTimeout(() => { age.value = https://www.it610.com/article/7; }, 2000); watchEffect(() => { console.log('age的值', age.value); }); // 依次打印出 5 6 7

三停止侦听

watchEffect 在组件卸载时自动停止
watchEffect 可以显示的调用返回值实现：停止侦听

let age = ref(5); setTimeout(() => { age.value = https://www.it610.com/article/6; }, 1000); setTimeout(() => { stopHandler(); // 停止侦听 }, 1500); /* 因为在1500ms时显示的停止了侦听，故不会监测到该值的变化，但是（该值实际上被更新了，只是watchEffect没有继续侦听而已） */ setTimeout(() => { age.value = https://www.it610.com/article/7; }, 2000); let stopHandler = watchEffect(() => { console.log('age的值', age.value); }); // 打印结果: 5 6

四清除副作用根据官方文档介绍，清除副作用触发条件：

副作用即将重新执行时
侦听器被停止时

let age = ref(5); setTimeout(() => { age.value = https://www.it610.com/article/6; }, 1000); setTimeout(() => { age.value = https://www.it610.com/article/7; }, 2000); let stopHandler = watchEffect((onInvalidate) => { onInvalidate(() => { console.log('onInvalidate'); }); console.log('age的值', age.value); }); 在每一次侦听回调前去执行 onInvalidate 函数。 /* age的值 5onInvalidate age的值 6onInvalidate age的值 7 */

五附加options

主要区别详见组件钩子更新顺序

let num = ref(1); setTimeout(() => { num.value += 1; }, 1000); watchEffect( () => { let b = num.value; console.log('welcom组件--watchEffect'); }, { // flush: 'post' flush: 'pre' // 默认值 } );

六侦听调试待补充...