vue3 watch调接口

在Vue 3中，watch函数的接口声明如下：

export declare interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
  immediate?: Immediate;
  deep?: boolean;
}

其中，`immediate`是一个布尔类型的参数，用于指定是否在watch创建时立即执行一次回调函数。如果设置为`true`，则会在watch创建时立即执行回调函数；如果设置为`false`或不提供该参数，则不会立即执行回调函数。

`deep`也是一个布尔类型的参数，用于指定是否深度监听对象的子属性。如果设置为`true`，则会监听对象的子属性的变化；如果设置为`false`或不提供该参数，则只会监听对象本身的变化。

下面是一个使用watch函数的示例：

// 监听demo对象的name属性
watch(() => demo.name, (newValue, oldValue) => {
  console.log('watch 已触发', newValue);
});

在上述示例中，watch函数监听了`demo`对象的`name`属性的变化，并在回调函数中打印出新值。

相关问题

vue调接口模糊查询

在Vue中调用接口进行模糊查询的步骤如下所示：

1. 首先，在Vue组件中定义一个`watch`属性，用来监听输入框的值变化。在`watch`中，设置一个函数，当输入框的值改变时会实时查询相应的表数据。这个函数会调用一个名为`searchData`的方法。

2. 在Vue组件的`methods`中，定义一个名为`searchData`的方法。这个方法会接收一个`bool`参数，用来判断是否进行模糊查询。首先，将当前页码`currentPage`重置为1，然后判断`bool`的值。如果为`true`，则获取输入框的值`paramName`，并调用一个名为`selectByName`的接口方法。这个接口方法会发送一个GET请求到指定的URL，并传递一个`name`参数。查询结果会返回一个Promise对象，通过`.then`方法获取查询结果的响应数据。最后，将查询结果赋值给`monitorData`变量，同时更新表的总数`total`。如果`bool`为`false`，则调用一个名为`refreshData`的方法来更新表的数据。

3. 在API的JS文件中，定义一个名为`selectByName`的接口方法。这个方法会发送一个GET请求到指定的URL，其中`name`参数的值为传入的`param`参数。该接口方法返回一个Promise对象。

通过上述步骤，就可以在Vue中调用接口进行模糊查询了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue实现输入框的模糊查询，与后端对接接口](https://blog.csdn.net/weixin_43312391/article/details/123485701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3+ts的watch监听

在 Vue 3 中，我们可以使用 `watch` 函数来监听数据的变化。对于 TypeScript，我们可以使用泛型来指定监听的数据类型。

下面是一个示例：

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

interface UserInfo {
  name: string;
  age: number;
}

export default defineComponent({
  setup() {
    const userInfo = ref<UserInfo>({
      name: 'Tom',
      age: 18,
    });

    watch(userInfo, (newVal, oldVal) => {
      console.log('userInfo changed: ', newVal, oldVal);
    });

    return {
      userInfo,
    };
  },
});

在上面的示例中，我们定义了一个 `UserInfo` 接口来描述用户信息对象的类型。然后使用 `ref` 函数创建了一个响应式的 `userInfo` 对象，并且在 `watch` 函数中监听了 `userInfo` 对象的变化，当 `userInfo` 对象发生变化时，会输出新旧值的信息。

需要注意的是，如果监听的是一个对象或数组，可以使用 `deep` 选项来指定是否深度监听对象或数组中的属性或元素。例如：

watch(userInfo, (newVal, oldVal) => {
  console.log('userInfo changed: ', newVal, oldVal);
}, { deep: true });

这样，当 `userInfo` 对象的属性发生变化时，也会触发监听回调。