vue3watch监听

// 使用 Vue 3 的 watch 监听数据变化

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    // 定义一个方法来更新 count
    const increment = () => {
      count.value++;
    };

    // 使用 watch 监听 count 的变化
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count,
      increment
    };
  }
};
</script>

解释说明：

1. ref：用于定义响应式数据。这里 count 是一个响应式的变量，初始值为 0。
2. watch：用于监听 count 的变化。当 count 发生变化时，会触发回调函数，并传入新值和旧值。
3. increment 方法：每次点击按钮时，count 的值会增加 1。
4. 模板部分：显示当前的 count 值，并提供一个按钮来触发 increment 方法。

通过这种方式，你可以监听任何响应式数据的变化，并在变化时执行相应的逻辑。