vue3中watch的用法

在Vue3中，watch可以通过以下方式使用：

1.在setup函数中使用watch：

import { watch } from 'vue'

setup() {
  // 声明响应式变量
  const count = reactive({ value: 0 })
  
  // 监听count.value的变化
  watch(() => count.value, (newValue, oldValue) => {
    console.log(`count变为了${newValue}，旧值为${oldValue}`)
  })
  
  return {
    count
  }
}

2.在组件中使用watch：

import { watch } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    // 监听count的变化
    watch('count', (newValue, oldValue) => {
      console.log(`count变为了${newValue}，旧值为${oldValue}`)
    })
  }
}

以上是watch的使用方法，在Vue3中还提供了watchEffect函数来监听变量的变化。需要注意的是Vue3中取消监听的方法不再是$watch，而是返回一个unwatch函数来取消监听。