vue3 watch掉接口

对于Vue 3中的watch，可以通过 watch API 监听接口的变化。以下是一个例子：

import { watch } from 'vue'

export default {
  data() {
    return {
      dataFromAPI: null
    }
  },
  created() {
    this.fetchDataFromAPI()
  },
  methods: {
    async fetchDataFromAPI() {
      // 发起接口请求获取数据
      // 假设接口返回一个对象，将数据赋值给this.dataFromAPI
      this.dataFromAPI = await fetch('https://example.com/api')
        .then(response => response.json())
    }
  },
  watch: {
    dataFromAPI(newValue) {
      // 当this.dataFromAPI发生变化时执行的逻辑
      console.log('接口数据发生变化:', newValue)
      // 执行其他操作...
    }
  }
}

在上面的例子中，当组件实例被创建时，会调用`created`钩子函数来调用`fetchDataFromAPI`方法，该方法会发起接口请求并将返回的数据赋值给`dataFromAPI`属性。

同时，在`watch`配置中，监听`dataFromAPI`属性的变化。当`dataFromAPI`发生变化时，会执行相应的逻辑。

这样，每当接口数据发生变化时，会触发watch中的逻辑，你可以在其中执行其他操作。