vue2 在子组件监听父组件的值value变化，对子组件监听父组件传来的value，之后做更新操作，会导致父组件的requestAnimationFrame的循环更新value值卡顿，这是什么问题？-灵析社区

vue2 在子组件监听父组件的值value变化，对子组件监听父组件传来的value，之后做更新操作，会导致父组件的requestAnimationFrame的循环更新value值卡顿，这是什么问题？ animateFunc() { // 30fps const tempImgUrlList = []; for (const [key, val] of Object.entries(this.timestamp_dict)) { if (this.videoIndexEvent == this.eventData[0].value.length - 1) { // 视频全部播放完毕暂停 cancelAnimationFrame(this.animateNumber); this.setPauseisTrue(); this.isVideoAction = false; break; } if ( this.videoIndex == Object.values(this.timestamp_dict)[0].imgs.length - 1 ) { // 第一段播放完成暂停 cancelAnimationFrame(this.animateNumber); this.isVideoAction = false; break; } this.slidervalue = val.timestamp[this.videoIndex] || this.slidervalue; const url = "data:image/jpeg;base64," + val.imgs[this.videoIndex]; tempImgUrlList.push(url); } try { if ( this.videoIndex == Object.values(this.timestamp_dict)[0].imgs.length - 1 ) { cancelAnimationFrame(this.animateNumber); this.isVideoAction = false; // 第一段播放完请求下一段数据 if (this.has_next) { // this.has_next 是否有下一个视频 this.slidervalue = parseFloat(this.slidervalue) + 1; this.alginSendSocket().then(res => { if (res === "socket") { this.timer = setInterval(() => { if (!this.load_video) { clearInterval(this.timer); this.timer = null; this.videoIndex = 0; this.initImage(); this.animateFunc(); this.isVideoAction = true; } }, 500); } else { this.videoIndex = 0; this.initImage(); this.animateFunc(); this.isVideoAction = true; } }); } else { // 若无下一段数据就结束 this.videoIndex = 0; this.videoIndexEvent = 0; } return; } } catch (error) { // this.load_video = false; // 加载完成 } this.imgUrlList = tempImgUrlList; this.videoIndex += 1; this.videoIndexEvent += 1; // 记录播放的index this.animateNumber = requestAnimationFrame(this.animateFunc); }, 子组件 "parent.slidervalue": { handler(newVal, oldVal) { try { let getchart = echarts.getInstanceByDom( document.getElementById("charts" + this.index) ); if (this.parent.isPause && getchart && this.signalName.length !== 0) { /** * * 就近匹配 往上走一个 使用父组件的X轴list * 子组件还是旧的 未更新，前期父子组件搭建问题，采用此方法，之后不推荐 * */ const findIndex = this.findIndexDep( this.parent.eventData[0].value, String(newVal) ); const xValue = this.dateTimes[findIndex]; let newOption = _.chain(this.defOption) .set("xAxis[0].axisPointer.value", xValue) .value(); getchart.setOption(newOption); this.sendvalue(newVal, this.parent.eventData[0].value); } } catch (error) { throw "Cannot read properties of null (reading 'getAttribute')"; } }