vue3 ts中使用watch

在 Vue3 中使用 TypeScript，可以使用 `watch` 函数来监听数据的变化。下面是一个示例：

import { defineComponent, ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count 变化了：${oldValue} -> ${newValue}`);
    });

    function handleClick() {
      count.value++;
    }

    return {
      count,
      handleClick,
    };
  },
});

在上面的代码中，我们使用了 `ref` 来创建一个响应式的数据 `count`，然后使用 `watch` 函数来监听它的变化。当 `count` 的值发生变化时，回调函数会被触发，并且可以得到新旧值。

相关问题

vue3+ts如何使用watch监听

在Vue 3中，结合TypeScript使用`watch`功能可以帮助我们监听数据的变化并执行相应的处理。Vue的`watch`API在TypeScript中看起来类似于这样的形式：

import { Ref, watch } from 'vue';

// 创建一个Ref实例存储需要观察的数据
let count: Ref<number> = ref(0);

// 定义一个watch回调函数
const handleCountChange = (newValue: number, oldValue: number) => {
  console.log(`Count has changed, new value: ${newValue}`);
};

// 使用watch劫持数据变化
watch(count, handleCountChange); // 当count的值改变时，handleCountChange函数会被调用

// 更新数据
count.value++; // 这将会触发watch的回调

在这个例子中，`watch`接受两个参数：一个是你要监视的对象（如`count`），另一个是你想要监听的那个属性的变化。当指定的属性发生变化时，回调函数就会被执行。

如果你需要监听整个对象的所有变化，可以传递一个匿名函数：

watch(count, () => {
  console.log('Count or any property inside it has changed');
});

vue3 ts watch

在Vue 3中，watch选项已经被重构为一个函数，可以使用watch函数来监听数据的变化。watch函数接收两个参数：要监听的数据和回调函数。当被监听的数据发生变化时，回调函数将被触发。

import { watch } from 'vue';

watch(
  () => {
    // 要监听的数据
    return data;
  },
  (newValue, oldValue) => {
    // 回调函数
    console.log('数据发生变化', newValue, oldValue);
  }
);

在Vue 3中，watch函数还支持一些选项参数，包括immediate、deep和flush。这些选项可以通过一个配置对象来传递给watch函数。

import { watch } from 'vue';

watch(
  () => {
    // 要监听的数据
    return data;
  },
  (newValue, oldValue) => {
    // 回调函数
    console.log('数据发生变化', newValue, oldValue);
  },
  {
    immediate: true, // 是否立即执行回调函数，默认为false
    deep: true, // 是否深度监听对象内部的变化，默认为false
    flush: 'pre' // 在何时触发回调函数，默认为'pre'，即在组件更新之前触发
  }
);

在Vue 3中，this.$watch已经被移除，取而代之的是watch函数。watch函数与组件的watch选项有相同的功能，但使用方式略有不同。