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

Question

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')";        }      }

Answer 1

控制一下更新频率：

"parent.slidervalue": {  handler: _.throttle(function(newVal, oldVal) {    try {      let getchart = echarts.getInstanceByDom(        document.getElementById("charts" + this.index)      );      if (this.parent.isPause && getchart && this.signalName.length !== 0) {        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) {      console.error("Error in handler: ", error);    }  }, 100),}