vue3 watch

最新推荐文章于 2024-08-14 23:12:09 发布

阿豪boy

最新推荐文章于 2024-08-14 23:12:09 发布

阅读量63

点赞数

文章标签： java vue 队列 js javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065310

版权

本文详细介绍了Vue3中watch的使用，包括监听ref、reactive、数组的变化，以及如何停止监听和使用clean进行节流。同时，通过实例展示了lazy特性，以及在不同情况下stop的运用，强调了clean在防止重复请求中的作用。

摘要由CSDN通过智能技术生成

原文链接: vue3 watch

上一篇: vue3 简单上手

下一篇: vue3 provide ref

watch

监听ref

let a = ref(0)
let b = ref(1)
watch(() => {
  console.log('watch a+b', a.value + b.value)
})

watch(a, () => {
  console.log('watch a', a.value + b.value)
})

setTimeout(
  () => {
    a.value++
  }, 1000
)
setTimeout(
  () => {
    b.value++
  }, 2000
)

默认是先执行一次, 不指定监听的数据源时, 只要关联数据变化, 就会执行, 指定监听源时, 只有指定的数据变化后才会执行

监听reactive

let a = reactive({count: 1})
let b = reactive({count: 2})

watch(() => {
  console.log('a+b', a.count + b.count)
})

watch(() => a.count, () => {
  console.log('a.count', a.count + b.count)
})
watch(() => a, () => {
  console.log('a', a.count + b.count)
})
setTimeout(() => {
  a.count++
}, 1000)
setTimeout(() &