vue3 watch用法

// 在 Vue 3 中使用 watch 监听数据变化的示例

<template>
  <div>
    <input v-model="message" placeholder="输入一些内容">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('');

    // 监听 message 的变化
    watch(message, (newVal, oldVal) => {
      console.log('新的值:', newVal);
      console.log('旧的值:', oldVal);
    });

    return {
      message
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. ref: 用于定义响应式数据。message 是一个响应式的字符串变量。
2. watch: 用于监听 message 的变化。每当 message 发生变化时，回调函数会被触发，并且可以访问到新值 (newVal) 和旧值 (oldVal)。
3. setup 函数: Vue 3 组合式 API 的入口函数，所有的组合式 API 都在 setup 中使用。

这个例子展示了如何使用 watch 来监听 message 的变化，并在控制台中输出新旧值。