you may have an infinite update loop in a component render function.

最新推荐文章于 2024-11-27 23:35:57 发布

ChangYan.

最新推荐文章于 2024-11-27 23:35:57 发布

阅读量749

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/changyana/article/details/130573935

版权

前端专栏收录该内容

86 篇文章

订阅专栏

文章讲述了在Vue.js应用中，由于在checkboxInit函数内同时改变数据状态导致的渲染无限循环问题，从而引发性能问题。解决方案是将引起更新的操作移出该函数，以避免不必要的连续更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错如下：
在这里插入图片描述
产生的原因：在组件的 render 函数中有一个无限更新循环。当 Vue.js 组件的 render 函数触发一次更新后，又立即导致另一次更新时，就会出现这种情况。这会导致浏览器卡死并且消耗大量资源。
看一下我的代码：
在这里插入图片描述

    checkboxInit(row, index) {
      if (row.is_downloaded === 1 && row.status_code === 0) {
        this.multipleSelection.splice(this.multipleSelection.indexOf(row.path), 1)
        return 0
      } else {
        return 1
      }
    },

我同时改变了checkbox的是否可选状态和是否选中状态，所以这就会导致更新的立即触发，就会出现报错。
解决办法：
将this.multipleSelection.splice(this.multipleSelection.indexOf(row.path), 1)从checkboxInit函数中去除，在其它地方拿到row.path然后对this.multipleSelection进行更新。