Element-UI分页组件连续点击后页码循环跳转问题解决方案

我在项目中发现当分页组件的总页数比较大的时候（数量级在十万到百万左右），若连续多次快速点击页码，分页组件会出现循环跳转的情况。

效果图如下所示：

说一下出现这个现象的原因！

我的组件代码如下：

<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryData.pageNumber"
    :page-sizes="[10, 20, 30, 40]"
    page-size="queryData.pageSize"
    layout="total,  prev, pager, next, jumper"
    :total="queryData.totalRow">
</el-pagination>

handleCurrentChange代码如下：（这个方法是页面出现变化时的回调函数）

handleCurrentChange(val) {
    let $this = this;
    $this.queryData.pageNumber = val;
    $this.doQueryData();
    console.log(`当前页: ${val}`);
}

可以看到，我在组件中的current-page与handle方法中的页码接收变量是同一个！！！正是因为使用了同一个变量，在快速点击页面时，可能由于异步操作造成了死循环，导致了这一问题。具体是怎么产生这个问题的，希望各位大牛能够在评论区解释一下，谢谢。