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

Z时代
2024-02-08
分类：IT

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

回答：

控制一下更新频率：

"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),
}