vue3当请求的数据发生变化时自动刷新页面

在Vue3中，当请求的数据发生变化时，可以通过`watch` API来实现自动刷新页面。`watch`可以监听一个响应式数据的变化，并在数据变化时执行回调函数。

以下是一个示例代码，当请求的数据`data`发生变化时，会自动刷新页面：

<template>
  <div v-for="item in data" :key="item.id">{{ item.name }}</div>
</template>

<script>
  import { reactive, watch } from 'vue'
  import axios from 'axios'

  export default {
    setup() {
      const state = reactive({
        data: []
      })

      const fetchData = async () => {
        const res = await axios.get('/api/data')
        state.data = res.data
      }

      fetchData()

      watch(() => state.data, () => {
        console.log('data changed')
        // 执行一些更新页面的操作
      })

      return {
        data: state.data
      }
    }
  }
</script>

在上面的代码中，我们使用了`watch` API监听了`data`的变化，当`data`发生变化时会执行回调函数并输出一条日志。在回调函数中可以执行一些更新页面的操作，例如重新渲染组件、修改页面中的文本内容等等，从而实现自动刷新页面的效果。