vue3使用分页切换页面时数据改变

当使用Vue3进行分页切换时，如果数据改变但页面没有刷新，可以考虑使用`watch`函数来监听数据变化。在`watch`函数中，可以更新页面数据并重新渲染页面。以下是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in dataList">{{ item }}</li>
    </ul>
    <button @click="changePage">Change Page</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  name: 'Pagination',
  setup() {
    const currentPage = ref(1);
    const dataList = ref([]);

    watch(currentPage, async (newVal, oldVal) => {
      // 在这里更新数据
      dataList.value = await fetchData(newVal);
    });

    const changePage = () => {
      currentPage.value++;
    };

    const fetchData = async (page) => {
      // 发送请求获取数据
      const res = await fetch(`https://example.com/api/data?page=${page}`);
      const data = await res.json();
      return data;
    };

    return {
      currentPage,
      dataList,
      changePage
    };
  }
};
</script>

在上面的代码中，我们使用`watch`函数监听`currentPage`变量的变化。当`currentPage`变化时，会异步获取新的数据并更新`dataList`变量的值。在模板中，我们使用`v-for`指令遍历`dataList`变量并渲染页面。当点击"Change Page"按钮时，会触发`changePage`函数，从而使`currentPage`值加1，进而触发`watch`函数的执行，从而更新数据并重新渲染页面。