vue3 watch写法

在Vue 3中，watch函数的使用方式有多种，可以用于监听响应式对象、计算属性以及ref对象等。

1. 监听响应式对象的变化：

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0
})

watch(() => state.count, (newCount, oldCount) => {
  console.log(`count发生了变化：${oldCount} -> ${newCount}`)
})

state.count = 1 // 输出 "count发生了变化：0 -> 1"

2. 监听计算属性的变化：

import { ref, computed, watch } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

watch(() => doubleCount.value, (newDoubleCount, oldDoubleCount) => {
  console.log(`doubleCount发生了变化：${oldDoubleCount} -> ${newDoubleCount}`)
})

count.value = 1 // 输出 "doubleCount发生了变化：0 -> 2"

以上是Vue 3中watch函数的基本使用方法。您可以根据需要选择监听的对象和相应的回调函数进行处理。