vue 3 的 reactive 用于响应式管理音视频播放状态而非直接控制播放，需配合原生 media 元素或第三方组件；核心状态统一置于 reactive 对象中，通过事件（如 @timeupdate、@loadedmetadata）与 dom 同步，并用 computed 衍生 ui 状态，结合 ref 和 onmounted 操作真实 dom 实现双向控制。
Vue 3 的 reactive 本身不直接控制音视频播放，而是用来**响应式地管理播放器的逻辑状态**，比如是否播放、当前时间、音量、播放模式等。它配合原生 <audio></audio> 或 <video></video> 元素，或封装好的第三方组件（如 vue3-video-play），才能构成完整控制链。
核心状态用 reactive 统一管理
把所有可变的播放相关数据放进一个响应式对象里，便于集中维护和跨组件共享：
-
避免分散定义多个 ref：比如不用分别写
const isPlaying = ref(false)、const currentTime = ref(0)等，改用一个 reactive 对象统一承载 - 结构清晰、语义明确：例如
const playerState = reactive({<br> isPlaying: false,<br> currentTime: 0,<br> duration: 0,<br> volume: 1,<br> muted: false,<br> playbackRate: 1,<br> error: null<br>})后续在模板中可直接使用 {{ playerState.currentTime }}，在 JS 中修改也只需 playerState.currentTime = 120，响应式自动触发更新。
与原生媒体元素联动的关键时机
reactive 状态要真正“生效”，必须在合适的生命周期钩子中绑定事件并同步数据：
-
@timeupdate：持续更新
currentTime和计算进度百分比 -
@loadedmetadata：获取
video.duration后赋值给playerState.duration -
@play / @pause：手动设置
playerState.isPlaying = true/false -
@volumechange：读取
video.volume和video.muted并同步到状态
注意：不要在 timeupdate 中频繁调用 playerState.currentTime = video.currentTime（可能引发性能抖动），建议加节流或用 requestAnimationFrame 优化。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章