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>("飛機(jī)");
const message2 = ref<string>("火車(chē)");

watchEffect(() => {
  console.log("message1========>,", message1);
  // 不使用 message2 就不會(huì)監(jiān)聽(tīng) 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>("飛機(jī)");
const message2 = ref<string>("火車(chē)");

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

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

<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 —————— 下一次運(yùn)行之前要做的事");
  });
});

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

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

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

watchEffect(
  () => {
    // 測(cè)試 flush
    const spanEle = document.getElementById("ipt");
    // flush = pre 時(shí)，打印 null; flush = post 時(shí)，打印節(jié)點(diǎn)
    console.log("spanEle========>,", spanEle); 

    // 修改 iptVal 測(cè)試 onTrack、onTrigger
    console.log("iptVal============>", iptVal.value);
  },
  {
    flush: "post",
   	// 收集依賴(lài)時(shí)觸發(fā)
    onTrack: () => {
      debugger;
    },
    // 更新時(shí)觸發(fā)
    onTrigger: () => {
      debugger;
    },
  }
);