《Vue3认识watchEffect高级侦听器》

发表于 分类于 ， Valine：

watchEffect
立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
如果用到 message 就只会监听 message 就是用到几个监听几个 而且是非惰性 会默认调用一次

1
2
3
4
5
6
let message = ref < string > "";
let message2 = ref < string > "";
watchEffect(() => {
  //console.log('message', message.value);
  console.log("message2", message2.value);
});

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

1
2
3
4
5
6
7
8
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 返回一个函数 调用之后将停止更新

1
2
3
4
5
6
7
8
9
10
11
12
const stop = watchEffect(
  (oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(() => {});
    console.log("message2", message2.value);
  },
  {
    flush: "post",
    onTrigger() {},
  }
);
stop();

更多的配置项

副作用刷新时机 flush 一般使用 post

pre sync post
更新时机 组件更新前执行 强制效果始终同步触发 组件更新后执行

onTrigger 可以帮助我们调试 watchEffect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
  },
  {
    flush: "post",
    onTrigger() {},
  }
);