vue 死循环 loop function

<el-table-column
        prop="state"
        label="提取状态"
        width="384"
        align="center"
        class-name="bugAwardClass"
      >
        <template slot-scope="scope">
          <!-- bug -->
          <span
            :style="{
              color: stateColor,
            }"
            >{{ formatState(scope.row.state) }}</span
          >
        </template>
      </el-table-column>



data() {
    return {
      stateColor: "",
    };
  },

//把state转化为文字带颜色
    formatState(state) {
      //状态（0/审核不通过，1/待审核，2/审核通过）
      // let currentText = "xxx";
      // switch (state) {
      //   case 0:
      //     this.stateColor = 'xxx';
      //     currentText = 'xxx';
      //     break;
      //   case 1:
      //     this.stateColor = 'xxx';
      //     currentText = 'xxx';
      //     break;
      //   case 2:
      //     this.stateColor = 'xxx';
      //     currentText = 'xxx';
      //     break;
      //   default:
      //     break;
      // }

      return currentText ;
    },

vue中死循环的bug
因为在模板中span标签绑定了一个动态的class并且这个动态的class是绑定在data数据中的stateColor,span标签下的span标签绑定了一个函数，这个函数里面改变了stateColor的状态，这就是死循环的原因了。
vue模型是双向绑定的，一开始模板渲染的时候就会给父span元素绑定stateColor，然后子span元素通过了函数改变了stateColor的状态，那么vue就会通知模板重新渲染这个span元素，但是当这个父span重新渲染的时候，他的子span也会跟着重新渲染。

vue的模板渲染也是有判断的，如果你修改的stateColor = ‘ 1 ’ ，那么vue还是会判断模板渲不渲染的，不会重新渲染。

我这里会出现死循环的原因是，我这是table，他会有很多行都绑定了stateColor ，那么当其中一个stateColor 改变了，那么其他table行的stateColor 都会被通知重新渲染的。就是说只要有不同颜色，或者说不同变量的stateColor ，那么就会死循环触发这个函数。还有一个就是vue是按顺序来的，前面其中一个stateColor 和后面一个stateColor 只要不同，那么就会重新通知所有绑定stateColor的重新渲染，这就是死循环了。

总结：就是不要在子标签中需要改父标签已经绑定的data变量。