vue循环内对属性使用方法并修改data造成死循环

• 改一个老项目，修改部分代码后发现，一直报超出循环上限。只是告诉了我哪个文件有问题，但是这个文件是以前就存在的文件，都半年没改动了。

[Vue warn]: You may have an infinite update loop in a component render function

• 仔细查看并网上一顿操作后发现原因。

在v-for循环当中，如果使用方法或者计算属性对vm.$data的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环，此时vue就会发出警告

父组件

子组件

    
data(){
  return(){
      childItem: null
  }
},
methods:{
    hasOnlyChild(children = [], item) {
      let newChildren = children.filter(obj => {
        if (obj.hidden) {
          return false
        } else {
          return true
        }
      })
      if (newChildren.length === 1 && !item.meta) {
// 这里的赋值操作 造成死循环
        this.childItem = newChildren[0]
        return true
      }

      if (newChildren.length === 0) {
// 这里的赋值操作 造成死循环
        this.childItem = { ...item, path: '', noChild: true }
        return true
      }
      return false
    },
}

解决

具体问题不一样，但都是死循环类型，所以处理方式也是差不多的。就是先处理，再赋值渲染。

image.png

父组件

      


....
  watch: {
    '$store.getters.routes': {
      deep: true,
      handler: function (newValue, oldValue) {
        this.dealData(newValue)
      },
      immediate: true
    }
  },
  data() {    
    return {
      newRoutes: []
    }
  },
  methods: {
    dealData(list){
      for(let i in list){
        const item = list[i]
        item.flagShow = this.hasOnlyChild(item.children, item)
      }
      this.newRoutes = list
    },
    hasOnlyChild(children = [], item) {
      let newChildren = children.filter(obj => {
        if (obj.hidden) {
          return false
        } else {
          return true
        }
      })
      if (newChildren.length === 1 && !item.meta) {
        item.childItem = newChildren[0]
        return true
      }
      if (newChildren.length === 0) {
        item.childItem = { ...item, path: '', noChild: true }
        return true
      }
      return false
    }
  }

子组件

参考： https://www.jianshu.com/p/a51fb3694673?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation