Vue2监听经常会写出的bug

• 监听的双向引用

const vm = new Vue({
  data:{
    a: 0,
    b: 0
  },
  created(){
    this.a++
  },
  watch:{
    a(){
      setTimeout(()=>{
        this.b++
        console.log(this.b)
      },500)
    },
    b(){
      setTimeout(()=>{
        this.a++
        console.log(this.a)
      },500)
    }
  }
})

这个代码的监听就会一直执行不会停下来，这个例子里面我写了setTimeout，没有setTimeout页面基本卡死，很多时候代码量多了。找不到程序那里一直执行，基本上就是肯定是在监听中，我们写了双向监听

• UI绑定方法更新数据

<div id="app">{{a}}{{update()}}</div>

const vm = new Vue({
  el:'#app',
  data:{
    a: 0,
    b: 0
  },
  created(){
    this.a++
  },
  methods:{
    update(){
      setTimeout(()=>{
        this.a++
      },500)
    }
  },
})

这个代码也会一直执行下去，不会停止，UI也会一直更新

在开发环境中，项目控制台有的时候是会提示update loop有循环更新，这个基本可以肯定就是页面的UI中放了方法，方法里面更新了UI