关于vue.js:vue3APIwatchEffect

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

六 侦听调试

待补充…