Vue使用axios与v-for时报maximum recursive updates exceeded错误如何解决

问题根因 #

你触发递归更新的核心原因是在模板内直接调用了会修改原响应式数组的方法：product.product_image.reverse()

• Array.reverse() 是可变方法，执行时会直接修改原数组本身，而不是返回新数组
• 你把这个方法写在模板的属性绑定里，每次组件渲染都会执行一次，修改响应式的product_image数组
• 响应式数组被修改后会触发组件重新渲染，再次执行reverse()，形成无限循环，最终触发递归更新超限报错

修复方案 #

有两种可选方案，都可以避免修改原响应式数组：

方案1：调用reverse前先拷贝原数组 #

把模板里的对应属性改成：

:product-image="([...product.product_image].reverse())[0].url"

通过展开运算符...先拷贝原数组，再对拷贝的非响应式数组执行reverse，不会触发重新渲染。

方案2：在请求数据时预处理字段 #

拿到接口返回数据后，提前把需要的首图地址挂载到product对象上，不要在模板里做复杂计算：
修改beforeMount里的逻辑：

async beforeMount () {
  console.log('Fetching.... ');
  try {
    let response = await net.http.get('/product?page=1&size=7');
    // 预处理数据，提前拼好首图地址
    this.products = response.data.message.map(product => ({
      ...product,
      coverImage: [...product.product_image].reverse()[0].url
    }))
  } catch (error) {
    console.log("ERROR: " + error);
  }
}

然后模板里直接用预处理好的字段：

:product-image="product.coverImage"

这种方案性能更好，也更符合Vue的最佳实践，避免模板内做复杂计算。

额外可选优化 #

你当前v-for用index作为key也有潜在问题，如果后续列表需要增删、排序操作，会出现组件状态错乱的问题，建议把key改成唯一的商品id：

<product-card
  v-for="product in products"
  :key="product._id"
  <!-- 其余属性不变 -->
>
</product-card>

通用排查思路 #

遇到这类递归更新报错，可以按这个顺序排查：

• 先检查模板内的绑定表达式，有没有调用会修改响应式数据的方法（比如数组的push、pop、reverse、sort、splice等可变方法）
• 检查watch、updated生命周期钩子，有没有在里面修改当前依赖的响应式变量，导致循环触发
• 检查子组件的props传递，有没有传递可变对象后在子组件内直接修改props

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