ref 是 Vue 3 组合式 API 中访问 DOM 元素最常用且安全的方式，需配合 onMounted 使用，声明名须与模板 ref 属性严格一致，推荐 Vue 3.5+ 的 useTemplateRef，DOM 操作不触发响应式更新。
在 Vue 3 组合式 API 中，ref 是访问 DOM 元素最常用、也最安全的方式，但它不是“一写就用”，关键在于时机、声明方式和使用逻辑。
必须配合 onMounted 使用
DOM 节点只在组件挂载后才真实存在。在 setup 中直接读取 ref.value 会得到 null：
- 正确做法：用 onMounted 钩子包裹操作逻辑
- 错误做法：在 setup 顶层或 onBeforeMount 中尝试调用 focus()、getBoundingClientRect() 等方法
- Vue 3.5+ 推荐用 useTemplateRef（自动处理挂载时机），比手动 ref + onMounted 更简洁
声明 ref 变量要与模板中 ref 名称严格一致
组合式 API 不再依赖 this.$refs，而是靠变量名映射：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 模板写
<input ref="inputEl" />，setup 中就要写const inputEl = ref(null) - 名称不一致会导致 value 始终为 null，且无报错提示，容易排查困难
- 多个 ref 时建议用语义化命名，如
searchInput、listContainer，避免通用名如el
常见 DOM 操作示例（无需额外库）
拿到 DOM 引用后，可直接调用原生 API，这些操作不触发响应式更新，也不受 Vue 监控：
立即学习“前端免费学习笔记（深入）”；
- 聚焦输入框：
inputEl.value?.focus() - 滚动到底部：
listEl.value?.scrollTop = listEl.value?.scrollHeight - 测量尺寸位置：
boxEl.value?.getBoundingClientRect() - 绑定原生事件（谨慎）：
inputEl.value?.addEventListener('input', handler)，记得在 onUnmounted 中移除
注意 ref 的非响应式本质
$refs 或 ref.value 指向的是真实 DOM 节点或组件实例，它们本身不是响应式数据：
- 不能在模板中用
{{ inputEl }}渲染（会显示 object） - 不要把它当作状态变量传给其他 ref 或 computed
- 若需基于 DOM 状态做响应式判断（比如是否可见），应手动监听并更新一个独立的 ref
