computed 适合播放速率切换因其响应式依赖追踪能力可联动 video 元素 playbackrate 与 ui 控件，通过带 getter/setter 的双向绑定实现合法校验、状态同步与 dom 实时更新。
直接用 computed 实现播放速率切换，核心不是让它“计算出一个值”，而是借助它的响应式依赖追踪能力，把视频元素的 playbackRate 和 UI 控件（比如下拉菜单或按钮组）的状态真正联动起来，避免手动同步、状态错位或 DOM 更新滞后的问题。
为什么 computed 比单纯 ref 更适合这个场景
当用户点击“1.5x”按钮或从下拉框选中某个倍速时，你不仅要改视频元素的 playbackRate，还要让界面上显示的当前倍速实时更新。如果只用普通 ref 存储当前倍速，容易出现：视频已变快但 UI 还显示 1x；或者用户反复切换后，playbackRate 被设成非法值（如 0 或负数）却没拦截。而 computed 可以天然绑定读写逻辑，把“设置倍速”这件事封装成一次响应式赋值。
用 computed 做双向绑定的关键写法
定义一个带 getter 和 setter 的 computed 属性，它既反映当前真实播放速率，又在被修改时自动同步到 video 元素：
- getter 返回
videoElement.value?.playbackRate || 1，确保取值来自真实 DOM 状态，而非缓存变量 - setter 接收新值，先做合法性校验（比如限定在 0.5–2.0 区间），再赋给
videoElement.value.playbackRate - 这样所有修改入口（按钮、下拉框、快捷键）都走同一个 setter，逻辑集中、不易遗漏
配合 UI 控件的典型用法
下拉选择器是最直观的交互方式。模板中直接绑定这个 computed 属性：
-
<select v-model="currentPlaybackRate"></select>—— 不需要额外 @change 事件 - 每个
<option></option>的:value对应合法倍速值（如 0.5、1、1.25、1.5、2） - 用户选择后，computed setter 自动触发，视频立即响应，UI 同步更新
处理边界与兼容性细节
实际运行中要注意几个易忽略点：
- 某些浏览器（如旧版 Safari）不支持小于 0.5 或大于 2 的倍速，强行设置会被静默修正，所以 setter 中建议用
Math.min/max截断 - 视频尚未加载完成（
oncanplay未触发）时，playbackRate可能不可写，setter 内可加if (videoElement.value?.readyState >= 2)判断 - 若需记忆用户上次选择（比如刷新后恢复），可把 computed 的 getter 改为优先读 localStorage，setter 同步写入
