1. 前端开发必读：Vue.js mounted 生命周期全解析与实战场景
在前端开发中，mounted 是 Vue 的一个关键生命周期钩子，它标志着组件实例已经挂载到 DOM，能够安全地进行 DOM 操作和依赖于渲染结果的逻辑。
与 created、beforeMount 等阶段相比，mounted 的核心价值在于“渲染完成后再执行”的能力，确保诸如测量 DOM、初始化第三方库、以及触发需要真实 DOM 的异步任务都能正确进行。
1.1 mounted 的核心作用与执行时机
在 Vue 的渲染周期中，mounted 的执行发生在模板首次渲染为浏览器可见的 DOM 之后，此时你可以安全地查询和操作实际的 DOM 元素。
需要注意的是，数据更新并不自动触发 mounted，而是在组件初次渲染完成后才触发一次；如果你需要在数据变化后再次执行与 DOM 相关的逻辑，应使用 watcher 或在 nextTick 中执行。
export default {name: 'Example',data() {return { msg: '' }},mounted() {// 确保 DOM 已经渲染，读取真实 DOMthis.msg = this.$refs.title?.textContent || ''}
}
1.2 mounted 与其他生命周期钩子的关系
理解 mounted 与 created、beforeMount、以及 beforeUpdate、updated 的关系，有助于避免在不合适的阶段进行 DOM 操作。
created 仅在数据准备完毕后执行，尚未挂载到 DOM，此时对 DOM 的访问会失败；而 mounted 是唯一一个可直接访问真实 DOM 的时机。
export default {data() { return { width: 0 } },created() {// 此处还不能访问 DOM// this.width = ... // 仅基于数据},mounted() {// DOM 已经就绪this.width = this.$el.querySelector('.box').offsetWidth}
}
1.3 按场景选择 mounted 的时机
在 需要 DOM 测量、第三方库初始化、以及首次渲染后数据合并 的场景中，使用 mounted 可以获得稳定的起点。
如果你的逻辑只和数据有关，不强依赖 DOM，可以考虑在 created 或 setup 中完成初始化，以缩短用户等待时间。
import { ref, onMounted } from 'vue'
export default {setup() {const rootWidth = ref(0)onMounted(() => {// 根元素已经挂载，读取宽度rootWidth.value = document.querySelector('.root')?.clientWidth || 0})return { rootWidth }}
}
2. 实战场景：在 mounted 中完成常见任务
在实际开发中，mounted 常被用于先将界面结构呈现出来，再执行数据拉取、初始化第三方插件、以及测量 DOM 的任务。
以下场景示例帮助你理解如何在 mounted 钩子中实现稳定的行为并降低错误。
2.1 数据获取与渲染
常见模式是在 mounted 阶段发起网络请求，等数据返回后再更新数据模型以触发渲染。
为避免阻塞首次渲染，可以在 mounted 内触发异步请求，并在 setState/更新数据 时借助 Vue 的响应式系统自动更新视图。
import axios from 'axios'
export default {data() { return { items: [] } },mounted() {axios.get('/api/items').then(res => { this.items = res.data }).catch(err => { console.error(err) })}
}
import { ref, onMounted } from 'vue'
export default {setup() {const items = ref([])onMounted(async () => {const res = await fetch('/api/items')items.value = await res.json()})return { items }}
}
2.2 第三方库初始化与 DOM 测量
某些 UI 库需要在真实 DOM 就绪后进行初始化，此时 mounted 成为安全入口。
对需要获取尺寸、位置等信息的情况，应在 nextTick 可用时再执行，以确保布局已经完成。
import { ref, onMounted, nextTick } from 'vue'
const chartEl = ref(null)onMounted(async () => {await nextTick()// 现在可以安全读取 DOM 尺寸const w = chartEl.value?.offsetWidth || 0// 初始化图表
})
2.3 组合式 API 的 mounted 等效处理
在组合式 API 中，通过 onMounted 和返回的响应式数据，可以实现与 Options API 同样的效果。
为避免副作用，尽量将初始化逻辑放在 onMounted 之后的微任务中执行，以确保渲染队列已经完成。
import { ref, onMounted } from 'vue'
export default {setup() {const dataReady = ref(false)onMounted(() => {// 这里可以访问 DOM，并开始数据处理dataReady.value = true})return { dataReady }}
}
3. 注意事项与最佳实践
在实际开发中，mounted 虽强大，但也存在需要注意的坑点，如阻塞性操作、浏览器兼容性与 SSR 的兼容等。
下面的要点帮助你高效地利用 mounted，并在实际场景中保持稳定和可维护性。
3.1 避免在 mounted 中进行阻塞性网络请求
尽管在 mounted 里发起网络请求很常见，但应尽量避免在此处进行大量阻塞性操作，因为这会延缓首次渲染到达。
可以将重负载任务下放到异步阶段、或在数据请求完成后再进行 UI 渲染，确保用户看到快速的首屏内容。
export default {data() { return { content: '' } },mounted() {this.loadContent()},methods: {async loadContent() {const res = await fetch('/api/content')this.content = await res.text()}}
}
3.2 与服务端渲染（SSR）的兼容性
在 SSR 场景下，mounted 钩子只在客户端执行；在服务端渲染阶段不会执行，因此和数据预取、DOM 操作需要区分。
如果你的逻辑依赖于浏览器对象，如 window、document，应放在 onMounted 或在浏览器环境下执行，不要在服务端直接访问。
// 需要在客户端访问 window 的示例
import { onMounted } from 'vue'
onMounted(() => {if (typeof window !== 'undefined') {// 浏览器环境特有逻辑window.addEventListener('resize', onResize)}
})
3.3 使用 v-if 渲染前避免依赖细碎的 DOM
在页面中使用 v-if 控制初始渲染，对挂载逻辑有帮助，因为可以避免在 mounted 之前对某些元素的访问。
结合 watch、nextTick，可以实现平滑过渡并防止在挂载阶段触发的多余重绘。
import { ref, onMounted, nextTick } from 'vue'
export default {setup() {const show = ref(false)onMounted(async () => {await nextTick()show.value = true})return { show }}
}
