Vue3 —— watchEffect 高级侦听器

• 该文章是在学习 小满vue3 课程的随堂记录
• 示例均采用 <script setup>，且包含 typescript 的基础用法

前言

Vue3 中新增了一种特殊的监听器 watchEffect，它的类型是：

function watchEffect(
  effect: (onCleanup: OnCleanup) => void,
  options?: WatchEffectOptions
): StopHandle

下面通过实例来理解下它的用法

一、简单使用

• 第一个参数就是要运行的 副作用函数 effect
• 函数内 用到哪些数据 才会 监听哪些数据
• 且会 立刻执行一次（immediate）

<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />

import { ref, watchEffect } from "vue";

const message1 = ref<string>("飞机");
const message2 = ref<string>("火车");

watchEffect(() => {
  console.log("message1========>,", message1);
  // 不使用 message2 就不会监听 message2
  // console.log("message2========>,", message2);
});

二、副作用 effect 的参数

• effect 的参数 也是一个 函数，用来 注册清理回调。
• 清理回调 会在 该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求

<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />

import { ref, watchEffect } from "vue";

const message1 = ref<string>("飞机");
const message2 = ref<string>("火车");

watchEffect((onCleanup) => {
  console.log("message11111========>,", message1);
  console.log("message22222========>,", message2);

  onCleanup(() => {
    console.log("onCleanup —————— 下一次运行之前要做的事");
  });
});

页面刷新，首次打印：

更改输入框的值，再次打印：

三、watchEffect 返回值

• 返回值是一个用来 停止侦听器 的函数，调用后不再侦听
• 需要注意的是：停止时，不影响最后一次 onCleanup 的执行

<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />
<button @click="stopWatch">停止watchEffect</button>

const stop = watchEffect((onCleanup) => {
  console.log("message11111========>,", message1);
  console.log("message22222========>,", message2);

  onCleanup(() => {
    console.log("onCleanup —————— 下一次运行之前要做的事");
  });
});

const stopWatch = () => {
  stop();
};

页面刷新，首次打印：

更改输入框的值，再次打印：

点击按钮 停止侦听，再次打印：

四、options配置

watchEffect 的第二个参数是配置项：

• flush：watch 的执行顺序
  • pre | post | sync ，默认：pre，具体含义可以看上一篇 watch 中的解释
  • 一般需要在 dom 更新之后再获取的情况，可以设置为 post
• onTrack 用于开发环境调试
• onTrigger 用于开发环境调试

<input id="ipt" v-model="iptVal" />

const iptVal = ref<string>("aa");

watchEffect(
  () => {
    // 测试 flush
    const spanEle = document.getElementById("ipt");
    // flush = pre 时，打印 null; flush = post 时，打印节点
    console.log("spanEle========>,", spanEle); 

    // 修改 iptVal 测试 onTrack、onTrigger
    console.log("iptVal============>", iptVal.value);
  },
  {
    flush: "post",
   	// 收集依赖时触发
    onTrack: () => {
      debugger;
    },
    // 更新时触发
    onTrigger: () => {
      debugger;
    },
  }
);

五、周边 api

• watchPostEffect()：watchEffect() 使用 flush: 'post' 选项时的别名
• watchSyncEffect()：watchEffect() 使用 flush: 'sync' 选项时的别名