vue3中WatchEffect高级侦听器的实现

let message = ref<string>('飞机')
let message2 = ref<string>('杯子')
 watchEffect((oninvalidate) => {
  // 加载的第一次就直接监听
  console.log('message--', message.value);
  console.log('message2--', message2.value);
})

let message = ref<string>('飞机')
let message2 = ref<string>('杯子')
// stop为一个函数，通过调用可以停止监听
const stop = watchEffect((oninvalidate) => {
  // 加载的第一次就直接监听
  console.log('message--', message.value);
  console.log('message2--', message2.value);
  // oninvalidate清除一些副作用，会优先调用这个回调函数
  oninvalidate(() => {
    console.log('before');
  })
})
const stopWatch = () => stop()

// stop为一个函数，通过调用可以停止监听
const stop = watchEffect((oninvalidate) => {
  let ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
  console.log('ipt元素', ipt);
  // oninvalidate清除一些副作用，会优先调用这个回调函数
  oninvalidate(() => {
    console.log('before');
  })
}, {
  // 组件更新后触发监听
  flush: 'post',
  // 开发环境帮助调试
  onTrigger(e) {
    console.log('onTrigger---', e);
  }
})