上报警告的代码

<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane :label="item.label" :name="item.label" v-for="(item, index) in tabList" :key="index" lazy>
      <div class="article-wrapper" v-if="activeName === item.label && articleList[index]">
        <ArticleItem :item="item2" v-for="item2 in articleList[index]" :key="item2.id"/>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

// 获取数据
const getArticleListData = async (index = 0) => {
  const query = tabList.value[index].query
  const params = Object.assign({limit: 10, offset: 0, created_at: getCreatedAt()}, query)
  if (articleList.value[0].length === 0) {
    const {data} = await useAsyncData("article", () => $fetch("/api/article", {params}))
    const res: any = data.value
    articleList.value[index] = res.data
  } else {
    // 使用$fetch直接调用，它只会请求url的部分，不会传递参数
    const res: any = await $fetch("/api/article", {params})
    articleList.value[index] = res.data
  }
}
getArticleListData(0)

我是希望将ajax请求封装成一个函数，但是数据虽然渲染没有问题，但是控制台却报[Vue warn]: Hydration children mismatch in <div>警告问题，这能忍吗？排查了几个小时，一开始以为是因为因为二维数组的问题，测试了简单的demo后无果，

找到vue、nuxt的仓库查，尽管有差不多的异常，但是都没有值得借鉴的经验。

后来突发奇想，将ref类型的数据赋值放入useAsyncData函数后面，同样也会报警告，知道useAsyncData或者其他内置钩子函数需要在单独的作用域内使用，其实也可以想到，nuxt的这些钩子函数底层都是封装过的，与Vue的同构SSR一样，同构需要借助vuex，放入单独的函数内势必影响运行

正确的代码

if (articleList.value[0].length === 0) {
  console.log('server')
  const params = {limit: 10, offset: 0, created_at: getCreatedAt()}
  const { data } = await useAsyncData("article", () => $fetch("/api/article", {params}))
  if (data.value) {
    articleList.value[0] = data.value.data
  }
}
// 获取数据
const getArticleListData = async (index = 0) => {
  const query = tabList.value[index].query
  const params = Object.assign({limit: 10, offset: 0, created_at: getCreatedAt()}, query)
  // 使用$fetch直接调用，它只会请求url的部分，不会传递参数
  const res: any = await $fetch("/api/article", {params})
  articleList.value[index] = res.data
}