Vue 响应式侦听如何在 watchEffect 中同步多路视频监控画面的网格布局

watchEffect 无法同步多路视频画面，因其不处理 DOM 播放器状态与时间轴；真正同步依赖统一 masterTime 控制、CSS Grid 布局及防抖+标志位避免循环触发，跨端需服务端中继。

直接用 watchEffect 无法同步多路视频画面——它不处理 DOM 播放器状态，也不接管视频时间轴。真正起作用的是播放控制逻辑与布局渲染的分离：网格布局靠 CSS 实现，画面同步靠统一进度管理，watchEffect 只负责响应式联动其中一环。

网格布局用 CSS Grid 实现，不依赖 watchEffect

九宫格或多格监控界面本质是容器内多个 <video> 元素的排列问题，和响应式监听无关：

1. 用 display: grid 定义行列数，例如 grid-template-columns: repeat(3, 1fr) 实现三列均分
2. 每个 <video> 设置 width: 100%; height: 100% 自适应单元格
3. 通过 v-for 渲染视频列表，数据源（如摄像头地址数组）变化时，DOM 自动更新

视频同步靠统一 currentTime 控制，watchEffect 只作辅助响应

要让所有视频画面严格同步，关键不是监听某个变量，而是把播放器的 currentTime 当作受控状态来维护：

1. 定义一个响应式 ref：const masterTime = ref(0)，作为所有视频的“主时间轴”
2. 每个 <video> 绑定 @timeupdate 和 @seeked，读取当前值并更新 masterTime
3. 用 watchEffect 监听 masterTime，批量设置各视频的 .currentTime
4. 注意跳转前检查 video.readyState >= 1，避免未加载就赋值报错

防抖与来源过滤避免循环触发

用户拖拽一个视频进度条，会触发 timeupdate → 更新 masterTime → watchEffect 同步其他视频 → 其他视频也触发 timeupdate。这会导致连锁反应：

1. 在更新 masterTime 前加标志位，如 isSyncing = true
2. 各视频的事件处理器先判断 if (isSyncing) return
3. watchEffect 内部同步完后重置标志位
4. 对拖拽操作使用防抖（如 200ms），只取最终位置，减少中间无效同步

跨标签页或设备同步需服务端中继

单页面内用 watchEffect 能协调多个 <video>，但若要手机、电脑、大屏三端同步：

1. watchEffect 不参与网络通信，只负责本地响应
2. 本地变更后调用 API 上报当前 masterTime.value 到服务端
3. 其他端通过 WebSocket 接收广播，再更新本地 masterTime，触发 watchEffect 执行同步
4. 服务端作为唯一可信源（SSOT），避免多端修改冲突