mounted 是 Vue 2 中实例挂载完成后的生命周期钩子，此时 DOM 已渲染完毕、this.$el 存在且已插入文档，适用于发起请求、初始化 DOM 库、聚焦元素、绑定原生事件等操作，但需在 beforeDestroy 中清理，并注意其不等待子组件挂载。
在 Vue 2 中，mounted 是一个关键的生命周期钩子，它在实例挂载完成后被调用，此时 DOM 已经渲染完毕，可以安全地操作真实节点。这是执行初始化逻辑（如获取数据、初始化第三方库、设置定时器、绑定事件等）最常用且推荐的时机。
mounted 钩子的核心特点
它只在客户端执行（服务端渲染不触发），且保证 this.$el 已存在并已插入文档中。注意：它不等待子组件也完成挂载，但当前组件的模板已渲染到页面。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
常见使用场景与写法示例
-
发起初始数据请求：避免在
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() {
// ✅ 安全操作 DOM
this.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.chartContainer
if (el) {
this.chart = echarts.init(el)
}
},
fetchData() {
// 调用 API，更新 this.list
this.$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（仅限纯数据逻辑）
