初学者在mounted中拿不到DOM元素，主因是mounted仅保证自身模板挂载，不确保条件渲染、列表渲染或异步数据依赖的元素已渲染；推荐用ref配合nextTick，在v-if条件为真后执行。
初学者在 mounted 阶段操作 DOM 时，最常遇到的问题不是“不能操作”，而是“拿不到元素”——明明写了 this.$refs.xxx 或 document.getElementById，结果却是 undefined 或 null。核心原因在于：mounted 只保证组件**自身模板已挂载**，但不保证其中所有元素都已渲染完成，尤其当存在条件渲染、列表渲染或异步数据依赖时。
为什么 mounted 里还拿不到 DOM？
常见触发场景有三类：
-
v-if 控制的元素尚未满足条件：比如
<div v-if="show">...</div>，若show初始为false，该 DOM 根本不会生成，mounted 时自然查不到 -
v-for 渲染的数据为空数组：如
<li v-for="item in list" :key="item.id">{{ item.name }}</li>，若list初始化为空，循环体不渲染，DOM 不存在 - DOM 依赖异步数据（如 API 返回后才赋值）：mounted 执行时数据还没回来，模板还没重绘，ref 或原生查询必然失败
推荐写法：用 ref + nextTick 组合最稳妥
这是初学者最容易掌握、也最符合 Vue 官方推荐的方式。关键点是：先确保 ref 存在，再等 Vue 完成一次视图更新。
- 模板中给目标元素加
ref="target"（不要用id配原生查询） - 在 mounted 中调用
this.$nextTick，在里面访问this.$refs.target - 如果 ref 元素由 v-if 控制，需确认
v-if的条件在 mounted 时已为真；否则应把操作逻辑移到条件变为 true 后再执行
示例：
<template><div ref="scrollTarget" v-if="loaded">滚动到这里</div>
</template>
<script>
export default {
data() { return { loaded: false } },
mounted() {
this.fetchData().then(() => {
this.loaded = true;
this.$nextTick(() => {
if (this.$refs.scrollTarget) {
this.$refs.scrollTarget.scrollIntoView();
}
}
});
}
};
</script>
替代方案：用 updated 或 $once('hook:updated')
当元素是否渲染完全取决于响应式数据变化时，比反复轮询更优雅：
- 直接在
updated钩子中操作：每次数据变化引起重渲染后都会执行，适合需要持续响应的场景 - 只执行一次：在 mounted 中用
this.$once('hook:updated', () => {...})，Vue 会在下一次更新完成后调用一次回调，避免重复执行 - 注意：不要在 updated 里修改响应式数据，否则可能引发无限更新循环
避坑提醒：别踩这些常见错误
- 不用
setTimeout硬等（如setTimeout(() => {...}, 100)）：时间不可控，页面快慢、网络延迟都会影响可靠性 - 不推荐在 created 中操作 DOM：此时 $el 还未创建，一定失败
- 避免混用
ref和原生查询：ref 是 Vue 管理的引用，更稳定；document.querySelector容易因 v-if/v-for 失效，且无法感知 Vue 的响应式更新节奏 - 子组件 DOM 要通过
this.$refs.child.$el获取，不能直接查子组件内部结构
