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