Vue3中watchEffect高级侦听器的具体使用

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

<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);
});

<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 —————— 下一次运行之前要做的事");
  });
});

<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();
};

<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;
    },
  }
);