watchEffect 函数

官网介绍watchEffect

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

六 侦听调试

待补充...