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

六 侦听调试

待补充 …