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

问题：You may have an infinite update loop in a component render function.在组件渲染函数中你可能有一个无限更新的循环这就导致页面一直在加载无限循环下去，没有终止，卡死在vue的data方法中：data() {// 定义响应式变量isExecuteFlag: false}<el-table-column prop="" lab

​编辑 菜鸟小奇奇  ·  2021-08-12 11:01:06 发布

问题：You may have an infinite update loop in a component render function.

在组件渲染函数中你可能有一个无限更新的循环

这就导致页面一直在加载无限循环下去，没有终止，卡死

在vue的data方法中：

data() {
	// 定义响应式变量
	isDelFlag: false
}

 <el-table-column prop="" label="操作" width="190" align="center">
   <template slot-scope="scope" class="wes-operation-column">
   	<el-button type="text" @click="openModal('deleteDialogVisible', scope.row.list)"
   	:disabled="handleDeleteFlag(scope.row.list)">删除标识</el-button>
    </template>
 </el-table-column>

// 处理标识的函数
    handleDeleteFlag(list) {
      // 每一项都不为1说明没有皮试药物
      // let isPsbz
      let showDelete = list.every(item => item.psbz !== '1')
      if (!showDelete) {
        // 有删除标识
        for (let item of list) {
          if (item.psbz === '1' && item.zxzt === '已完成') {
            this.isDelFlag = true
            break
          } else if (item.psbz === '1' && item.zxzt === '进行中') {
            this.isDelFlag = true
            break
          } else {
            this.isDelFlag = false
            break
          }
        }
      } else {
        this.isDelFlag = true
      }
      return this.isDelFlag
    }

问题产生的原因：你在data中定义了一个响应式变量，而这个响应式变量的状态是通过一个函数来返回的，返回的状态结果要显示在Dom中，而这个函数的内部是一个循环，

问题就来了：循环没有及时终止，导致变量一直在更新，而Dom又一直在渲染，无限循环，渲染-更新 卡死

解决方案：将data中的响应式变量去掉，而是在函数内部定义一个局部变量，最终将这个局部变量返回即可

data() {
	// 定义响应式变量
	// isDelFlag: false
}

Dom处理不变

// 处理标识的函数
    handleDeleteFlag(list) {
      // 每一项都不为1说明没有皮试药物
      // let isPsbz
      let showDelete = list.every(item => item.psbz !== '1')
      if (!showDelete) {
        // 有删除标识
        for (let item of list) {
          if (item.psbz === '1' && item.zxzt === '已完成') {
            this.isDelFlag = true
            break
          } else if (item.psbz === '1' && item.zxzt === '进行中') {
            this.isDelFlag = true
            break
          } else {
            this.isDelFlag = false
            break
          }
        }
      } else {
        this.isDelFlag = true
      }
      return this.isDelFlag
    }