vue methods触发条件万分感谢

Question

在做商城时出现了一个问题，自己写了个demo复现代码html
{{currentFlag(item.flag)}}
刷新数据
刷新数据2
script
name:"",
data(){
return{
shopCartList:[]
}
},
methods:{
currentFlag(flag){
console.log('该方法被执行')
return"111"+flag
},
refresh(){
//数据请求
getTestList().then(reobj=>{
this.shopCartList=reobj
})
},
refresh2(){
//数据请求
getTestList().then(reobj=>{
this.shopCartList.forEach((item,index)=>{
reobj.forEach((item1,index1)=>{
if(index==index1){
item.flag=item1.flag
}
})
})
})
}
},
created(){
this.refresh()
}
现在问题就是，为什么点第一个按钮，直接将请求回来的数据赋给shopCartList，methods里的currentFlag()方法就会被触发，点第二个按钮将请求回来的数据遍历赋值就不会触发currentFlag(),除非遍历的时候手动调用

Answer 1

点第一个按钮，直接将请求回来的数据赋给shopCartList，数据发生了改变，所以重新渲染，循环运行currentFlag方法。点第二个按钮将请求回来的数据遍历赋值：这里你两个方法中的getTestList获取的数据应该是相同的，即shopCartList与reobj对应项的flag值是相同的，这样数据没有发生改变，所以不会重新渲染。另外，方法二的这个赋值太没必要，性能差，代码多，就是这样写，单层循环也够了reobj.forEach((item,index)=>{letre=this.shopCartList[index]re&&(re.flag=item.flag)})

Answer 2

你所遇到的问题涉及到数组渲染;refresh2方法shopCartList的更新，Vue不能检测到；而refresh方法的更新，Vue能检测到，会重新渲染，对应的就会触发currentFlag方法数组更新检测