watcheffect 不能直接操作未挂载的 dom 元素，因其执行时机在 onbeforemount 阶段、ref 尚为 null；dom 操作应使用 onmounted、watch + ref 判断或 nexttick 确保节点存在。
不能在 watchEffect 里直接操作尚未挂载的 DOM 元素——它首次执行时，模板 ref 还是 null。正确做法是把“数据响应”和“DOM 操作”分层处理，用不同机制各司其职。
watchEffect 只负责响应式数据驱动逻辑
它适合读取 ref、reactive、路由参数、store 状态等，并触发请求、更新状态、计算派生值。它的执行时机在组件实例创建后、DOM 挂载前（接近 onBeforeMount），不等模板渲染完成。
- 它自动收集内部读取的响应式依赖，比如
route.params.id或props.userId - 只要这些值一变化或初始就有值，
watchEffect就立刻运行一次 - 但此时
ref="inputEl"对应的inputEl.value一定是null，强行调用.focus()会报错
DOM 操作必须等元素真实存在
真正要操作 DOM 节点（聚焦、滚动、初始化第三方库），得确保节点已挂载、已被 Vue 注入 ref 值。可靠方式有三种：
-
onMounted：最常用，保证 DOM 已就绪，适合一次性初始化（如
inputRef.value?.focus()） -
watch + ref 存在性判断：监听 ref 变化，等它从
null变成真实节点再操作
例如：watch(inputRef, () => { if (inputRef.value) inputRef.value.focus() }, { immediate: true }) -
nextTick：在 DOM 更新后、浏览器重绘前执行，适合“数据变了，紧接着要操作对应 DOM”的场景
例如：await nextTick(); inputRef.value?.scrollIntoView()
需要响应式地控制 DOM？拆开状态与引用
如果 DOM 行为要随某个响应式状态变化（比如 shouldAutoFocus 切换时自动聚焦/失焦），不要把逻辑全塞进 watchEffect，而是解耦：
- 定义一个普通 ref 控制行为开关：
const shouldFocus = ref(false) - 用
watch监听这个开关：watch(shouldFocus, (newVal) => { newVal && inputRef.value?.focus() }) - 在
onMounted或用户交互中修改shouldFocus.value
实在要在 watchEffect 里碰 DOM？加安全兜底
极少数情况（如封装组合式函数）需兼顾响应式与 DOM，务必加上存在性检查和调度控制：
- 先判空：
if (!inputRef.value) return - 再确认是否在文档中：
if (!document.contains(inputRef.value)) return - 必要时延后到下一帧：
requestAnimationFrame(() => inputRef.value?.focus()) - 或等 DOM 更新完成：
await nextTick(); inputRef.value?.focus()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
