vue封装一个分页的逻辑，当分页的总数变化时如何分页

在Vue.js中，封装分页逻辑通常会涉及到数据管理以及视图层和业务逻辑的分离。当你需要处理分页时，一般会创建一个组件，如`PaginationComponent`，并包含以下几个关键部分：

1. **数据状态**: 保存当前页数、每页显示的数量以及总记录数。可以使用Vuex或自定义计算属性来管理。

data() {
  return {
    currentPage: 1,
    itemsPerPage: 10,
    totalCount: null,
  };
},
computed: {
  totalPages() {
    if (this.totalCount && this.itemsPerPage) {
      return Math.ceil(this.totalCount / this.itemsPerPage);
    } else {
      return 0;
    }
  },
}

2. **方法**: 当总量发生变化时（比如从服务器获取新的数据），触发更新分页逻辑。

methods: {
  fetchData(page = this.currentPage) {
    // 这里假设你有一个异步函数fetchData，传入当前页码
    this.fetchDataFromServer(page).then(total => {
      this.totalCount = total;
      // 更新当前页的展示数据
      this.updatePageItems();
    });
  },
  updatePageItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    // 假设this.items是实际的数据列表，这里更新视图层的数据
    this.items = this.items.slice(start, end);
  },
}

3. **响应式监听**: 使用`watch`或`$on`/$`off`监听`totalCount`的变化，并在改变时调用`fetchData`。

// 如果使用Vuex，可以在store中监听action完成后的回调
// 或者直接在组件内部使用watch
watch: {
  totalCount(newTotal) {
    if (newTotal !== this.totalCount) {
      this.fetchData();
    }
  }
},
created() {
  // 初始化可能的情况
  this.fetchData();
},

**相关问题--:**
1. 怎么在Vue组件销毁时取消对totalCount的监听？
2. 总数不变的情况下，如何实现实时刷新当前页数据?
3. 怎样优化`updatePageItems`方法，提高性能？