Implementation of WatchEffect Advanced Listener in vue3

This is a supplement to the knowledge point. I won’t introduce it more and I’m tired. I just upload the code to comment. I’ll read it myself

Basic usage

let message = ref&lt;string&gt;('airplane')
let message2 = ref&lt;string&gt;('cup')
 watchEffect((oninvalidate) =&gt; {
  // Listen directly for the first time you load  ('message--', );
  ('message2--', );
})

You can manually pause the monitoring

let message = ref&lt;string&gt;('airplane')
let message2 = ref&lt;string&gt;('cup')
// stop is a function, and you can stop listening by callingconst stop = watchEffect((oninvalidate) =&gt; {
  // Listen directly for the first time you load  ('message--', );
  ('message2--', );
  // Oninvalidate clears some side effects and will call this callback function first.  oninvalidate(() =&gt; {
    ('before');
  })
})
const stopWatch = () =&gt; stop()

Configuration Items

// stop is a function, and you can stop listening by callingconst stop = watchEffect((oninvalidate) =&gt; {
  let ipt: HTMLInputElement = ('#ipt') as HTMLInputElement
  ('ipt element', ipt);
  // Oninvalidate clears some side effects and will call this callback function first.  oninvalidate(() =&gt; {
    ('before');
  })
}, {
  // The listening is triggered after the component is updated  flush: 'post',
  // Develop environment helps debug  onTrigger(e) {
    ('onTrigger---', e);
  }
})

This is the end of this article about the implementation of WatchEffect Advanced Listener in vue3. For more related contents of vue3 WatchEffect Advanced Listener, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!