Vue3使用Apexchart渲染接口数据出现Maximum recursive updates exceeded报错

问题原因 #

• 核心触发原因是你在循环中频繁修改响应式数组sceneAttributes：每次调用sceneAttributes.value.push(obj)都会触发一次响应式更新，绑定了该数组的Apexchart组件会同步重渲染。Apexchart内部对series数据的监听逻辑在高频更新下，和你的数组修改形成了递归触发的更新链路，最终触发了Vue的递归更新限制报错。
• 你当前代码的模板中使用了chartOptions配置，但script部分没有定义并返回该变量，也存在潜在的渲染异常问题。

修复方案 #

核心修改逻辑是：先用普通临时数组处理所有格式化逻辑，所有数据处理完成后再一次性赋值给响应式变量，全程只触发一次响应式更新，即可规避递归更新问题。修改后的完整代码如下：

<template>
    <apexchart type="rangeBar" :options="chartOptions" :series="sceneAttributes"></apexchart>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const sceneAttributes = ref([]);
    // 请根据你的需求补充完善chartOptions配置，以下为最简示例
    const chartOptions = ref({
      chart: {
        height: 350,
        type: 'rangeBar'
      },
      xaxis: {
        type: 'numeric'
      }
    })

    fetch(`apiUrl`)
    .then(resp => resp.json())
    .then(data => {
      // 用非响应式的临时数组存储处理后的数据
      const tempArr = []
      for (const key in data.sceneAttributeValues) {
        data.sceneAttributeValues[key].forEach(att => {
          let obj = {};
          obj.data = [];
          obj.data.push({
            x: att.attributeValue.attributeId,
            y: [att.from, att.to+1]
          })
          // 并行if改为else if，避免属性同时存在多个值类型时被覆盖
          if (att.attributeValue.strValue) {
            obj.name = att.attributeValue.strValue;
          } else if (att.attributeValue.intValue) {
            obj.name = att.attributeValue.intValue;
          } else if (att.attributeValue.boolValue) {
            obj.name = att.attributeValue.boolValue;
          }
          tempArr.push(obj)
        })
      }
      // 所有数据处理完成后一次性赋值给响应式变量，仅触发一次更新
      sceneAttributes.value = tempArr
    });

    return { sceneAttributes, chartOptions }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Nora