vue3 watch 使用

在Vue3中，watch使用方式相比Vue2有一些变化。下面是Vue3中使用watch的一些注意点：

1. watch选项的使用方式有变化，Vue3中使用watch的方法是通过调用watch函数来实现，如下所示：

   import { watch } from 'vue'
   
   watch(数据, 监听器函数, 配置选项)

2. 监听器函数可以接收到两个参数，分别是新值和旧值。而在Vue2中只有一个参数。

3. Vue3中可以使用ref和reactive两种响应式数据类型，watch可以监听这两种类型的数据变化。

4. watch函数的配置选项包括：`immediate`、`deep`、`flush`等。

下面是一个使用watch的例子：

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>double: {{ double }}</p>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const double = ref(0)

    watch(count, (newCount, oldCount) => {
      double.value = newCount * 2
    }, { immediate: true })

    return {
      count,
      double
    }
  }
})
</script>

上面的代码中，我们定义了一个计数器count和它的两倍double。当count变化时，我们通过watch监听到count的变化，然后更新double的值。在这里，我们将immediate选项设置为true，这样在组件初始化时就会立即执行监听器函数。