Vue2生命周期如何使用 mounted 钩子函数执行DOM挂载后的初始化

时间：2026-08-08 14:25:48 编辑：袖梨来源：一聚教程网

mounted 是 Vue 2 中实例挂载完成后的生命周期钩子，此时 DOM 已渲染完毕、this.$el 存在且已插入文档，适用于发起请求、初始化 DOM 库、聚焦元素、绑定原生事件等操作，但需在 beforeDestroy 中清理，并注意其不等待子组件挂载。

在 Vue 2 中，mounted 是一个关键的生命周期钩子，它在实例挂载完成后被调用，此时 DOM 已经渲染完毕，可以安全地操作真实节点。这是执行初始化逻辑（如获取数据、初始化第三方库、设置定时器、绑定事件等）最常用且推荐的时机。

mounted 钩子的核心特点

它只在客户端执行（服务端渲染不触发），且保证 this.$el 已存在并已插入文档中。注意：它不等待子组件也完成挂载，但当前组件的模板已渲染到页面。

常见使用场景与写法示例

发起初始数据请求：避免在 created 中操作 DOM，而在 mounted 中拉取数据后更新视图（尤其涉及依赖 DOM 尺寸或位置的逻辑）
初始化 DOM 相关库：如 ECharts、Swiper、Mapbox、日期选择器等，需传入真实容器元素
手动聚焦输入框或滚动定位：例如 this.$refs.input.focus() 或 this.$el.scrollIntoView()
绑定原生事件监听器：比如监听 window.resize，并在 beforeDestroy 中清理

正确写法（Options API）

在组件选项中直接定义：

export default {data() {return {list: []}},mounted() {// ✅ 安全操作 DOMthis.initChart()this.fetchData()this.$refs.searchInput?.focus()// ✅ 绑定全局事件（记得在 beforeDestroy 清理）window.addEventListener('resize', this.handleResize)},beforeDestroy() {// ⚠️ 必须清理，防止内存泄漏window.removeEventListener('resize', this.handleResize)},methods: {initChart() {const el = this.$refs.chartContainerif (el) {this.chart = echarts.init(el)}},fetchData() {// 调用 API，更新 this.listthis.$http.get('/api/items').then(res => {this.list = res.data})},handleResize() {this.chart?.resize()}}}

注意事项

mounted 不是“所有子组件都挂载完”的时机；如需等待全部子组件就绪，可用 this.$nextTick(() => {...}) 包裹，或监听子组件的 mounted 事件
不要在 mounted 中修改响应式数据并期望立即触发 DOM 更新——Vue 的更新是异步的，如需操作更新后的 DOM，请用 this.$nextTick
SSR 场景下该钩子不会执行，相关逻辑需判断环境或移至 created（仅限纯数据逻辑）

推荐专题

最新下载

热门教程

Vue2生命周期如何使用 mounted 钩子函数执行DOM挂载后的初始化

mounted 钩子的核心特点

常见使用场景与写法示例

正确写法（Options API）

注意事项

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程