vue3setup语法糖使用watch

在 Vue 3 中，Vue 提供了一个新的特性叫做 `setup`，它可以让我们更灵活地组织我们的代码逻辑。在 `setup` 函数中，我们可以使用 `watch` 函数来监听响应式数据的变化。

下面是一个使用 `watch` 的示例：

<template>
  <div>
    <input v-model="name" placeholder="Enter your name" />
    <p>Hello, {{ name }}</p>
  </div>
</template>

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

export default {
  setup() {
    const name = ref('');
    
    watch(name, (newValue) => {
      console.log(`Name changed to: ${newValue}`);
    });
    
    return {
      name
    };
  }
};
</script>

在这个示例中，我们定义了一个名为 `name` 的响应式数据，并使用 `watch` 监听它的变化。每当 `name` 发生变化时，`watch` 的回调函数就会被触发，并打印出新的值。

需要注意的是，在 Vue 3 的 `setup` 函数中，我们需要将响应式数据使用 `ref` 进行包裹，以确保 Vue 能够正确地追踪其变化。

希望这个示例对你有所帮助！如果还有其他问题，请随时提问。