vue3初体验-watchEffect高级侦听器

特性

相比 watch 来讲,watchEddect 是非惰性的,即会先触发一次

清楚副作用

在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

import { watchEffect, ref } from "vue";
let message = ref < string > "";
let message2 = ref < string > "";
watchEffect((oninvalidate) => {
  //console.log('message', message.value);
  oninvalidate(() => {});
  console.log("message2", message2.value);
});

停止跟踪

watchEffect 返回一个函数 调用之后将停止更新

const stop = watchEffect(
  (oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(() => {});
    console.log("message2", message2.value);
  },
  {
    flush: "post",
    onTrigger() {},
  }
);
stop();

配置

flush:

• pre: 组件更新前执行
• sync: 强制效果始终同步触发
• post: 组件更新后执行(一般使用这个)

调试

onTrigger 可以帮助我们调试 watchEffect