watcheffect 首次执行在组件实例创建后、dom 挂载前，此时模板 ref 仍为 null；应分层处理：用 watcheffect 响应数据，用 onmounted/watch 操作 dom，必要时结合 nexttick 或存在性判断。
因为 watchEffect 的首次执行发生在组件实例创建完成、但 DOM 尚未挂载完成时，它依赖的是响应式系统追踪，而非 DOM 渲染状态。这不是 bug，而是设计使然——它要自动收集内部读取的响应式数据，所以必须在 setup 执行完、模板还没渲染前就运行一次。
watchEffect 的触发时机本质
它属于 Vue 响应式系统的“副作用调度器”，和渲染流程解耦：
- 执行点接近
onBeforeMount阶段，此时template还未编译成真实 DOM 节点 - 只要你在函数体内读取了
ref或reactive的属性，它就会立即执行并建立依赖关系 - DOM 元素（比如通过
ref="el"绑定的）此时仍是null，因为模板尚未挂载
为什么在 watchEffect 里访问 ref.value 会是 null
模板 ref 的赋值是异步的，由 Vue 在 DOM 挂载后统一注入。而 watchEffect 不等这个过程，它只认响应式变量：
-
<input ref="inputEl">中的inputEl是一个ref(null) - watchEffect 第一次运行时，
inputEl.value还没被 Vue 赋值，自然为null - 即使你后续在 watchEffect 里写
inputEl.value?.focus()，首次也会报错
安全访问 DOM 的组合方案
不要把 DOM 操作逻辑全塞进 watchEffect，而是分层处理：
- 用
watchEffect处理「数据驱动」逻辑：比如根据route.params.id发起请求、更新状态 - 用
onMounted+watch或onUpdated处理「DOM 反馈」逻辑：比如聚焦、滚动、第三方库初始化 - 需要响应式地操作 DOM？把 DOM 引用和业务状态拆开，例如：
const inputRef = ref(null)
const shouldFocus = ref(false)
watch(shouldFocus, () => { inputRef.value?.focus() }, { immediate: true })
onMounted(() => { shouldFocus.value = true })
更健壮的兜底写法
如果必须在副作用中操作 DOM，加一层存在性判断和调度控制：
- 用
nextTick()确保 DOM 已更新但尚未重排：await nextTick(); inputRef.value?.focus() - 用
requestAnimationFrame等待浏览器 layout 完成：requestAnimationFrame(() => inputRef.value?.focus()) - 检查节点是否真正挂载：
if (inputRef.value && document.contains(inputRef.value)) { ... }
