猿问
下载APP

有大佬遇到过这个问题吗:vue中如何正确的使用watch?各位有什么建议?

在组件传参的时候使用Object.assign,子组件使用watch监听传递过来的参数,参数变化时执行相应事件,并设置了immediate:true,但是现在在页面初次加载的时候事件会执行两次,不知道是什么导致的。
//父组件
:_id="'singleStage'"
:text="`SINGLESTAGE`"
:url="'/xxx'"
:params="Object.assign({},params,{'stageType':'SINGLE'})"
:styles="styles">
data(){
return{
params:{
a:2
b:1
}
}
}
//子组件
watch:{
'params':{
handler(){
this.getData()//这里执行了两次
},
deep:true,
immediate:true
}
}
解决办法是设置immediate:false但是不知道为什么会导致第一次执行两次
斯蒂芬大帝
浏览 47回答 2
2回答

ABOUTYOU

immediate:true立即执行了一次watchhandler随后又触发了一次render,render里会执行Object.assign(),而Object.assign()生成的是一个新对象(地址不一样),watch检测到了改变,所以watchhandler又执行了一次以上就触发了两次watchhandler。

德玛西亚99

immediate:true,代表watch里面声明了之后会立马执行handler里面的函数之后watch监听到params改变,再执行一次。总共执行两次
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答