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选项有相同的功能，但使用方式略有不同。