vue3中，watch常见的几种使用方法

话不多说，直接上干货代码！

先定义两个变量a, b

import { ref, watch } from 'vue'

const a = ref(0)
const b = ref(0)

1.每个变量单独监听

watch(() => a.value, (newA, oldA) => {
  console.log(newA, oldA)
})
watch(() => b.value, (newB, oldB) => {
  console.log(newB, oldB)
})

2.将多个变量放到数组中，组合监听

watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log('newA, oldA:', newA, oldA)
  console.log('newB, oldB:', newB, oldB)
})

3.将多个变量放到数组中，综合监听

watch([a, b], (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { immediate: true, deep: true })

另外，本人通过验证发现，vue3中，watch监听的变量，如果发生无限循环，最多只会监听100次，从而避免出现内存/栈溢出的问题。

以上内容，均是本人开发经验总结，如有雷同，纯属巧合。另外，内容如有错误，欢迎评论区指出，谢谢！