最近在做一個(gè)播放音頻的列表，列表界面是一個(gè)子組件，發(fā)現(xiàn)通過(guò)props數(shù)據(jù)到子組件，數(shù)組中的數(shù)據(jù)變化了，可是界面沒(méi)有進(jìn)行更新，有點(diǎn)郁悶

部分代碼如下：
子組件：

 props:{
      punchCardData:Array,
      pauseChildAllAudio:{
        type:Boolean,
      },
      watchSelfFlag:{
        type:Number
      }
    },
    
     watch:{
      pauseChildAllAudio(newV,oldV){
        this.pauseAll();
      },
      punchCardData(newV,oldV){
        this.mPunchCardData = newV;
        this.$nextTick(()=>{
          this.init();
        })
      }
    },

/**
       * 播放
       * @param item
       * @param index
       */
      handlePlay(item,index){
        const len = this.sounds.length;
        for(let i=0;i<len;i++){
          if(this.sounds[i]){
            this.sounds[i].pause();
            this.mPunchCardData[i].play = true;
          }

        }
        this.currentIndex = index;
        this.$set(item,'play', false);
        if(this.sounds[index]){
          this.sounds[index].play();
              this.$set(item,'duration',this.formatTime(Math.round(this.sounds[index].duration())));
          requestAnimFrame(this.step.bind(this));
          this.$emit('pauseTheOnAuido');
        }

      },

   step(){
        const  self = this;
        // Determine our current seek position.
        if(this.sounds[this.currentIndex]){
          let seek = this.sounds[this.currentIndex].seek() || 0;
          let progress = document.getElementsByClassName('progress-bar')[this.currentIndex]
          let progressDot = document.getElementsByClassName('progressDot')[this.currentIndex]
          // this.mPunchCardData[this.currentIndex].current = this.formatTime(Math.round(seek))
          this.$set(this.mPunchCardData[this.currentIndex],'current',this.formatTime(Math.round(seek)));
          progress.style.width = (((seek / this.sounds[this.currentIndex].duration()) * 100) || 0) + '%';
          progressDot.style.left = (((seek / this.sounds[this.currentIndex].duration()) * 100) || 0) + '%';
          if (this.sounds[this.currentIndex].playing()) {
            requestAnimFrame(this.step.bind(self));
          }
          if(this.mPunchCardData[this.currentIndex].current===this.mPunchCardData[this.currentIndex].duration){
            this.sounds[this.currentIndex].stop();
            this.mPunchCardData[this.currentIndex].play = true;
            this.$set(this.mPunchCardData[this.currentIndex], 'play',true);
          }
        }

      },

很不解，為啥數(shù)據(jù)變化了，可是頁(yè)面上卻沒(méi)有展示出來(lái)。