Vue JS新手如何将原生JS视频自动连播代码转换为Vue实现？

核心实现思路 #

• 用Vue响应式数据维护视频列表、当前播放索引，替代原生JS的全局变量
• 用ref获取video DOM实例，替代原生的getElementById查询
• 直接在模板上绑定ended事件，替代手动addEventListener
• 索引自动循环逻辑和原生保持一致，到末尾后回到第一条重新播放

完整可运行代码（Options API 版本，新手易读） #

<template>
  <video 
    ref="videoPlayer"
    controls 
    height="200"
    @ended="handleVideoEnd"
  ></video>
</template>

<script>
export default {
  data() {
    return {
      // 视频源列表，等价于原原生代码的videoSource[0]、videoSource[1] 写法
      videoSource: [
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
      ],
      // 当前播放索引，对应原原生代码的全局变量i
      currentIndex: 0
    }
  },
  mounted() {
    // 页面挂载完成后自动播放第一条，对应原代码的videoPlay(0)
    this.playVideo(this.currentIndex)
  },
  methods: {
    // 完全对应原原生的videoPlay方法
    playVideo(videoNum) {
      // 通过ref获取DOM实例，替代原代码的getElementById
      const videoEl = this.$refs.videoPlayer
      // 完全复用原原生的DOM操作逻辑
      videoEl.setAttribute("src", this.videoSource[videoNum])
      videoEl.autoplay = true
      videoEl.load()
      videoEl.play()
    },
    // 视频播放结束的处理函数，对应原代码的myHandler
    handleVideoEnd() {
      // 索引自增，取模实现循环，等价于原if判断逻辑
      this.currentIndex = (this.currentIndex + 1) % this.videoSource.length
      this.playVideo(this.currentIndex)
    }
  }
}
</script>

代码说明 #

• 完全复用原有原生逻辑，没有额外改动功能
• 所有状态存在Vue组件实例内，不会污染全局作用域
• 不需要手动销毁事件监听，组件卸载时Vue会自动清理绑定的事件
• 用取模运算简化了原有if判断的重复代码，效果完全一致

内容的提问来源于stack exchange，提问作者Vicky Nehare