vue前端实现的假分页

当接口速度快，响应数据量大的情况下 页面还未渲染完成时，可能会造成短暂的卡顿，所以做下前端假分页 优化下性能
html部分,和平常写法一样的
js部分:

<script>
  export default {
    data() {
      return {
        tableData: [//从后台获取或者自行定义],
        total: 0,
        current: 1,
        size: 10,
        pageList: [],
      }
    },
    created() {
      //调用获取数据
      this.getData()
    },
    methods: {
      //从后台获取数据处理
      getData() {
        //发送接口并赋值
        this.total = this.tableData.length
        // 拷贝一份数据
        let list = JSON.parse(JSON.stringify(this.tableData))
        // splice处理数组的方法会改变原数组,所以需要拷贝一份
        this.pageList = list.splice(0, this.size)
      },
      //改变当前页数
      handleSizeChange(val) {
        // 只要换页数就直接返回1页
        this.size = val
        this.current = 1
        this.pageList = this.tableData.slice(0, this.size)
      },
      // 改变当前页码
      handleCurrentChange(val) {
        this.current = val
        //如果页码为1,就正常切割
        if (val == 1) {
          this.pageList = this.tableData.slice(0, this.size)
          return
        }
        // 当前页码不为1时
        val = (val - 1) * this.size
        this.pageList = this.tableData.slice(val, val + this.size)
        //如果需要前面加载的数据的话
         this.pageList = this.tableData.slice(0, val + this.size)
      },
    },
  }
</script>