vue3API--watchEffect

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 = 6;
}, 1000); 

setTimeout(() => {
    age.value = 7;
}, 2000); 

watchEffect(() => {
    console.log('age的值', age.value);
});
// 依次打印出 5 6 7

三 停止侦听

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

let age = ref(5);

setTimeout(() => {
    age.value = 6;
}, 1000);

setTimeout(() => {
    stopHandler(); // 停止侦听
}, 1500);

/* 
因为在1500ms时显示的停止了侦听， 故不会监测到该值的变化，但是
（该值实际上被更新了，只是watchEffect没有继续侦听而已）    
*/
setTimeout(() => {
  age.value = 7;
}, 2000);

let stopHandler = watchEffect(() => {
    console.log('age的值', age.value);
});

// 打印结果: 5 6

四 清除副作用

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

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

let age = ref(5);

setTimeout(() => {
    age.value = 6;
}, 1000);

setTimeout(() => {
    age.value = 7;
}, 2000);

let stopHandler = watchEffect((onInvalidate) => {
    onInvalidate(() => {
        console.log('onInvalidate');
    });
    console.log('age的值', age.value);
});

在每一次侦听回调前去执行 onInvalidate 函数。
/*
  age的值 5

  onInvalidate
  age的值 6

  onInvalidate
  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' // 默认值
   }
);

六 侦听调试

待补充...