在实际开发工程中通过获取后端数据监听判断数组中长度是否大于0从而调用其他的方法,但是如果data域中的数据出现变化的话,就会导致监听中的方法重复调用,导致一些不必要的bug,例如:
原理:
watch监听的数据在Vue实例初始化的过程中发生了变化。Vue在初始化时会遍历data选项中的数据,将其转化为响应式数据。如果在转化过程中,某些数据发生了变化,watch会在转化前后都触发一次。
问题:
我们发现每个数组只有一个图片地址,且显示在视图层中。
现在我们通过$set改变data域中list数组中每个对象的属性在试试:
运行结果:
我们发现data区域中list数组中属性发生改变后watch监听就会重复调用导致数组1和数组2重复插入新的数据(图片地址)从而导致数据重复。
解决方法:
在data区域中定义一个判断数据yes=true,在watch监听内if判断中加入yes===true的判断条件,watch方法内吧yes赋值为false。
运行结果: