vue3 ts watch 用法

在Vue 3中，可以使用`watch`函数来监视响应式数据的变化。`watch`函数接受两个参数：要监视的数据和回调函数。当监视的数据发生变化时，回调函数将被触发。

在TypeScript中使用`watch`的示例代码如下：

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

export default {
  setup() {
    // 声明一个响应式的数组
    let infoList = reactive([
      { name: '张三', value: '24' },
      { name: '李四', value: '25' }
    ]);

    // 监视infoList数组的变化
    watch(
      () => infoList,
      (newVal, oldVal) => {
        console.log(newVal);
      },
      { immediate: true }
    );

    return {
      infoList
    };
  }
};

上述代码中，我们使用`reactive`函数声明了一个响应式的数组`infoList`。然后，我们使用`watch`函数来监视`infoList`数组的变化，并在回调函数中打印出新的值。

需要注意的是，`watch`函数的第一个参数是一个函数，该函数返回要监视的数据。在上述示例中，我们使用了箭头函数`() => infoList`来返回`infoList`数组。这样，当`infoList`数组发生变化时，`watch`函数就会触发回调函数。