脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 WatchEffect高级侦听器

vue3中WatchEffect高级侦听器的实现

 更新时间：2025年01月13日 11:01:22   作者：孙怼怼啊  
本文主要介绍了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);
  }
})

到此这篇关于vue3中WatchEffect高级侦听器的实现的文章就介绍到这了,更多相关vue3 WatchEffect高级侦听器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

最新评论