踩坑：uniapp写hooks时，响应式丢失

场景： 一般项目中会有多个地方需要用到列表，且列表一般都有上拉刷新和下拉加载更多的交互，所以我接下来要做得就是，封装一个hooks，来让全局的列表只需要传一个api进来就可以使用，提高代码开发效率，代码如下：

import { ref, reactive, computed, watch, onMounted } from 'vue'

/**
 * @function 全局列表hooks
 * @param  dataListApi 请求数据的api
 * @param  options 需要额外传入的参数
 * @param {Boolean} needLoading 是否需要使用loading效果
 */
export default (dataListApi, options = {}, needLoading = true) => {

  const pageInfo = reactive({
    offset: 1,
    limit: 10,
    minId: '',
    total: 0
  })

  const dataList = ref([])
  const isLoading = ref(false)
  const isNoMore = ref(false)//没有更多

  async function getDataList () {
    if (isNoMore.value) return
    showLoading()
    try {
      const { data } = await dataListApi({ ...pageInfo, ...options })
      console.log('hooks res', data);
      pageInfo.minId = data.records[data.records.length - 1].id
      pageInfo.total = data.total
      dataList.value = dataList.value.concat(data.records).slice(0,10)
      console.log('dataList',dataList);
      hideLoading()
      // 判断是否显示更多，如果要显示则增加页数
      isNoMore.value = pageInfo.offset * pageInfo.limit >= pageInfo.total
      if (isNoMore.value) return
      pageInfo.offset++

    } catch (error) {
      console.log(error);
      hideLoading()
    }
  }

  async function reset () {
    Object.assign(pageInfo, {
      offset: 1,
      limit: 10,
      minId: '',
      total: 0
    })
    getDataList()
  }

  function showLoading () {
    if (!needLoading) return
    isLoading.value = true
    uni.showLoading({
      title: '加载中'
    });
  }
  function hideLoading () {
    if (!needLoading) return
    isLoading.value = false
    uni.hideLoading();
  }



  return {
    pageInfo,
    dataList,
    getDataList,
    reset
  }
}

下面是使用实例：

import useGetList from '@/hooks/useGetList'
const { pageInfo,dataList, getDataList, reset } = useGetList(pickUpApi.insideListPageMinId)
console.log('dataList-------------',dataList.value);

出现问题！！！
拿到数据时，可以打印，但是页面没更新！！

然后想通过监听，来看看是不是ref的响应丢失了

watch(()=>dataList.value,(val)=>{
  console.log(1111,val);
})

但从上图发现，watch是可以监听到变化的，那是啥子原因？？？

突然，发现了编辑器出现了一行小字，黄色警告

setData 数据传输长度为 1076 KB，存在有性能问题！

我想，我一行代码咋会有16kb呢，难道是接口数据的问题？
然后瞅了一眼接口返回的数据，好家伙，五万多条！

破案了，就是数据太大的原因，到时页面由于性能问题无法响应，页面遭不住，数据太多了

解决方法

1. 使用splice将长数组给他截断（治标不治本）
2. 让后端将测试数据删掉