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()中的属性时，会报这个错，“You may have an infinite update loop in a component render function”，但是并没有影响正常的页面显示，为了顺从自己内心轻微的强迫症，还是决定解决下，
修改前的代码：.

// An highlighted block
  data() {
    return {
	 statusStyle:""
    };
  },
 computed: {
    _status() {
      return function (status) {
        switch (status) {
          case 0:
            this.statusStyle = "status-init";
            break;
          case 1:
            this.statusStyle = "status-running";
            break;
          case 2:
            this.statusStyle = "status-stopped";
            break;
          default:
            break;
        }
        return statusStyle;
      }
    },
   }

修改后的代码

 computed: {
    _status() {
      return function (status) {
        var statusStyle = "";
        switch (status) {
          case 0:
            statusStyle = "status-init";
            break;
          case 1:
            statusStyle = "status-running";
            break;
          case 2:
            statusStyle = "status-stopped";
            break;
          default:
            break;
        }
        return statusStyle;
      }
    },

简单分析了下，vue中的data()中的属性值本来就是受监控的，如果属性值变化，就可能触发计算属性进行计算，所以在计算属性中修改data()中的属性值，就可能触发无限循环，这也是报这个错误的原因，所以建议在计算属性中避免对data()中的属性值进行修改。