【Vue3】watchEffect 高级侦听器

<template>
  <input id="ipt" v-model="message" type="text">
  <input v-model="message2" type="text">
  <button @click="stopWatch"></button>
</template>

<script setup lang="ts">
import { watchEffect, ref } from 'vue';

let message = ref<string>('vue')
let message2 = ref<string>('vue2')

// 以函数形式调用watchEffect会返回一个停止监听函数，调用了就不会监听了
const stopWatch = watchEffect((oninvalidate) => {
  let ipt: HTMLInputElement = document.getElementById('ipt') as HTMLInputElement
  console.log(ipt, 'el');
  // 不加flush配置项 -> 首次为null，因为DOM还没有加载

  console.log(message.value)
  // 此时只会监听message，而不会监听message2，用到几个监听几个，会默认调用一次

  oninvalidate(() => {
    console.log('before');
  })
  // 该回调函数会在触发监听之前被执行，首次执行停止监听函数也会被执行一次
}, {
  flush: 'post',// 延迟执行,DOM加载完成后执行

  // 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新
  onTrigger: (e) => {
    debugger  // 监听到数据变化时会触发，进行调试
  }
})
</script>

<style lang="scss" scoped></style>