vue3 watch写法

Vue3中的watch写法与Vue2有所不同，具体如下：

1. 监听单个响应式数据的变化：

watch('count', (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`)
})

2. 监听多个响应式数据的变化：

watch({
  count: (newValue, oldValue) => {
    console.log(`count从${oldValue}变为${newValue}`)
  },
  name: (newValue, oldValue) => {
    console.log(`name从${oldValue}变为${newValue}`)
  }
})

3. 监听ref对象的变化：

const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`)
})

4. 监听reactive对象的变化：

const state = reactive({
  count: 0,
  name: 'Tom'
})
watch(state, (newValue, oldValue) => {
  console.log(`state从${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`)
})

5. 监听ref或reactive对象的变化，可以指定监听的属性：

const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`)
}, { deep: true, immediate: true, flush: 'sync' })

其中，deep表示是否深度监听，immediate表示是否立即执行回调函数，flush表示回调函数的执行时机。