VUE中的无限循环

<template>
<div id="">
  <ul v-for="(item,index) in listaaa">
    <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
  </ul>
</div>
</template>
<script>
export default {
  name: "",
  data(){
      return {
          listaaa: [{
              cdate: '123'
            },
            {
              cdate: '456'
            },
          ],
          flagName: ''
      }
  },
  methods: {
    dealFun(arg, index) {
      console.log('---------------------------')
      if (arg == this.flagName) {
        return false
      } else {
        this.flagName = arg
        return true
      }
    }
  },
}
</script>
<style  scoped>
</style>

导致无限循环的原因：flagName改变导致视图更新，视图更新又导致 dealFun()函数不停执行，进而flagName再次更新；循环往复；
解决办法：（使用全局变量）

<template>
<div id="">
  <ul v-for="(item,index) in listaaa">
    <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
  </ul>
</div>
</template>
<script>
var flagName;
export default {
  name: "",
  data(){
      return {
          listaaa: [{
              cdate: '123'
            },
            {
              cdate: '456'
            },
          ],
        //   flagName: ''
      }
  },
  methods: {
    dealFun(arg, index) {
      console.log('---------------------------')
      if (arg == flagName) {
        return false
      } else {
        flagName = arg
        return true
      }
    }
  },
}
</script>
<style  scoped>
</style>