Vue.js 当播放列表中有很多曲目时，如何通过进度条降低当前播放曲目的CPU使用率？

我正在制作一个音乐播放器。我想在播放列表中显示当前正在播放的歌曲的进度条。如果播放列表中的曲目不多，没有任何问题，但如果曲目超过100首，则一切都开始缓慢运行，CPU使用率从~5-10%上升到30%。有一个UI按钮，可以删除选定的曲目，因此，如果我从播放列表中删除当前正在播放的曲目（就像我删除进度动画一样读取它，因为该曲目将继续播放），CPU使用率将下降到~5-10%

我在我的应用程序中使用了

vue引导

，但我也尝试了原始

bootstrap4

，甚至还尝试了自定义css，没有任何变化-在播放列表较大的情况下，CPU的使用率仍然很高

另外，如果我从代码中删除

b-progress

标记（或

div

用于原始引导和自定义解决方案），则一切正常

在

data\playlist\tracks

中有两个曲目示例，仅用于显示数据结构

我认为这个问题某种程度上与vue的反应性有关（太多的曲目无法观看？），或者某种程度上与环路本身有关

有人能提出解决方案或可能的解决办法吗

<template>
  <b-container>

    <youtube :video-id="currentTrack['trackId']" ref="youtube"></youtube>

    <div v-for="(trackObj, index) in playlist.tracks" :key="trackObj.trackId">
      <b-card no-body @click="playTrack(trackObj)">

      // THIS BLOCK IS CPU HUNGRY
      <b-progress v-if="currentTrack['trackId'] === trackObj['trackId']">
        <b-progress-bar
          :value="currentTrackTime" 
          :max="currentTrack['totalTrackDuration']">
        </b-progress-bar>
        {{ index + 1 }}. {{ trackObj.trackTitle }}
      </b-progress>

      <div v-else>
        {{ index + 1 }}. {{ trackObj.trackTitle }}
      </div>

      </b-card>
    </div>

  </b-container>
</template>

<script>
export default {
  data () {
    return {
      currentTrackTime: 0,

      currentTrack: {
        trackId: '1',
        trackTitle: 'Snowmine - Let me in',
        totalTrackDuration: 220,
      },

      playlist: {
        playlistName: 'SomeName',
        tracks: [
          {
            trackId: '1',
            trackTitle: 'Snowmine - Let me in',
            totalTrackDuration: 220,
          },
          {
            trackId: '2',
            trackTitle: 'Moby - Porcelain',
            totalTrackDuration: 245,
          }
        ]
      }
    }
  },

  methods: {
    playTrack (trackObj) {
      this.currentTrack = trackObj
      this.$refs.youtube.player.playVideo()
    }
  },

  mounted () {
    let self = this

    setInterval(function () {
        self.$refs.youtube.player.getCurrentTime().then(data => { self.currentTrackTime = data })
    }, 1000)
  }
}
</script>

//这个块需要CPU
{{index+1}}。{{trackObj.trackTitle}
{{index+1}}。{{trackObj.trackTitle}
导出默认值{
数据（）{
返回{
currentTrackTime:0，
currentTrack：{
trackId:'1'，
曲目名称：'雪雷-让我进来'，
总时长：220，
},
播放列表：{
播放名称：“SomeName”，
轨道：[
{
trackId:'1'，
曲目名称：'雪雷-让我进来'，
总时长：220，
},
{
trackId:'2'，
曲目名称：“摩比瓷器”，
总跟踪持续时间：245，
}
]
}
}
},
方法：{
playTrack（trackObj）{
this.currentTrack=trackObj
这是。$refs.youtube.player.playVideo（）
}
},
挂载（）{
让self=这个
setInterval（函数（）{
self.$refs.youtube.player.getCurrentTime（）.then（数据=>{self.currentTrackTime=data}）
}, 1000)
}
}

---

Youtube组件取自

是否有一些代码更新了

currentTrackTime

？@RoyJ，抱歉，忘记了。补充。有几件事需要尝试：将间隔改为5000，看看是否有很大区别。在

中放置一条控制台消息，然后

，这样你就可以看到它是否真的每秒钟发生一次（或者如果你改变间隔，每5秒发生一次）。

ref=“youtube”

元素在哪里？@RoyJ，这就是问题：）太傻了。CPU使用率恢复到5%，每5秒峰值达到11%。似乎我需要在谷歌上搜索

setInterval

的替代方案。您可以发布此解决方案。