异常教程
vue mounted（建议收藏）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
- 《从零手撸：仿小红书（微服务架构）》 已完结，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 100w+ 字，讲解图 4013+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3700+ 小伙伴加入学习 ，欢迎点击围观
前言
在 Vue 开发中，组件的生命周期管理是开发者必须掌握的核心概念之一。其中，mounted 钩子函数因其直接关联到 DOM 操作和组件初始化的特性，成为许多场景下的关键工具。无论是处理第三方库集成、表单验证，还是动态修改页面样式，mounted 的灵活运用都能显著提升开发效率。本文将从基础概念到实战案例，系统性解析 vue mounted 的作用原理、应用场景及常见误区，帮助读者在项目中高效使用这一功能。
一、Vue 生命周期与 mounted 的定位
1.1 组件生命周期的比喻
可以将 Vue 组件的生命周期想象为一个新生儿的成长过程：
- 出生前（
beforeCreate、created）：如同胎儿阶段，此时组件数据已准备就绪，但尚未与“世界”（DOM）接触。 - 睁眼时刻（
beforeMount、mounted）：婴儿第一次看到外界，组件的 DOM 结构正式生成，开发者可以开始与真实 DOM 交互。 - 成长阶段（
beforeUpdate、updated）：如同青少年时期，随着数据变化，组件不断更新自身状态。
1.2 mounted 的具体定义
mounted 是 Vue 生命周期中的一个重要钩子函数，它在以下条件满足后触发：
- 模板编译完成：Vue 已将模板渲染为虚拟 DOM（Virtual DOM）。
- DOM 挂载完成：虚拟 DOM 已替换真实 DOM 节点，并注入到页面中。
此时，开发者可以通过 this.$el 访问到渲染后的 DOM 元素，执行需要依赖真实 DOM 的操作。
二、mounted 与 created 的关键区别
2.1 对比表格：生命周期阶段对比
| 钩子函数 | 触发条件 | 是否可操作 DOM | 典型用途 |
|---|---|---|---|
created | 数据初始化完成 | 否 | 发起异步请求、处理数据逻辑 |
mounted | DOM 渲染完成 | 是 | 操作 DOM、绑定事件、集成第三方库 |
2.2 实例演示：通过代码理解差异
// 示例代码：created 与 mounted 的对比
export default {
created() {
// 此时 DOM 还未生成，访问 this.$el 会返回空节点
console.log('created:', this.$el); // 输出：空 <div>
this.fetchData(); // 可安全发起异步请求
},
mounted() {
// DOM 已渲染，可安全操作元素
console.log('mounted:', this.$el); // 输出：完整的渲染后的 DOM 结构
this.$el.style.backgroundColor = '#f0f0f0'; // 直接修改样式
}
}
三、mounted 的核心应用场景
3.1 场景一：第三方库的初始化
许多 UI 库（如 Chart.js、TinyMCE）需要在元素渲染完成后才能正确初始化。例如：
// 案例：在 mounted 中初始化 ECharts
mounted() {
// 确保 DOM 存在后获取元素
const chartDom = this.$refs.chartContainer;
const myChart = echarts.init(chartDom);
myChart.setOption({
xAxis: { data: ['Mon', 'Tue', 'Wed'] },
yAxis: {},
series: [{ type: 'bar', data: [10, 20, 30] }]
});
}
3.2 场景二：表单验证与焦点控制
当需要默认聚焦输入框或执行表单校验时，mounted 是理想选择：
mounted() {
// 自动聚焦输入框
this.$refs.usernameInput.focus();
// 手动触发表单验证
this.validateForm();
}
3.3 场景三：动态样式与动画
直接操作 DOM 实现 CSS 动画：
mounted() {
// 添加过渡类名触发 CSS 动画
this.$el.classList.add('animate-fade-in');
// 或者使用 JavaScript 动态设置样式
this.$el.style.transform = 'translateX(100px)';
}
四、进阶用法与注意事项
4.1 在 mounted 中处理异步操作
虽然 created 更适合发起异步请求，但在 mounted 中仍可处理依赖 DOM 的异步逻辑。例如：
mounted() {
this.fetchData().then(data => {
// 更新数据后重新渲染图表
this.updateChart(data);
});
}
4.2 避免在 mounted 中直接修改 props
直接修改 props 会导致 Vue 警告，应通过事件或计算属性替代：
// 错误写法
mounted() {
this.someProp = 'new value'; // 触发 Vue 警告
}
// 正确写法
mounted() {
this.$emit('update:someProp', 'new value');
}
4.3 处理 DOM 未更新的异常
当数据变化后立即操作 DOM，可能因虚拟 DOM 更新延迟导致问题。此时可使用 this.$nextTick()：
methods: {
updateContent() {
this.content = '新内容'; // 数据更新
this.$nextTick(() => { // 确保 DOM 更新后再操作
console.log(this.$el.textContent); // 输出新内容
});
}
}
五、常见问题与解决方案
5.1 问题：mounted 没有触发
可能原因：
- 组件未被正确挂载到 Vue 根实例。
- 使用了
v-if导致组件未渲染。
解决方案：
检查模板中组件是否被正确引入，并确保 v-if 条件为真。
5.2 问题：DOM 操作未生效
可能原因：
- 在
created钩子中尝试操作 DOM。 - 动态元素未正确绑定
ref。
解决方案：
- 将代码移至
mounted钩子。 - 确保
ref名称与模板中的一致：<div ref="chartContainer"></div>
六、实战案例：实现一个动态标签页组件
6.1 需求分析
构建一个支持自动计算标签宽度、鼠标悬停显示全名的组件，涉及以下步骤：
- 在
mounted中获取标签元素尺寸。 - 根据容器宽度动态计算显示的文本。
- 监听窗口大小变化更新布局。
6.2 代码实现
export default {
props: {
items: Array
},
mounted() {
this.updateLabels(); // 初始化布局
window.addEventListener('resize', this.updateLabels);
},
beforeDestroy() {
window.removeEventListener('resize', this.updateLabels);
},
methods: {
updateLabels() {
const containerWidth = this.$refs.container.offsetWidth;
this.items.forEach(item => {
const labelElement = this.$refs[`label-${item.id}`][0];
if (labelElement.offsetWidth > containerWidth * 0.3) {
item.showTooltip = true;
}
});
}
}
}
结论
vue mounted 是连接 Vue 数据驱动特性和真实 DOM 的关键桥梁，其应用场景覆盖从基础 DOM 操作到复杂第三方库集成的多个层面。通过理解其生命周期阶段、合理规避常见陷阱，并结合 $nextTick 等工具，开发者能够更高效地构建动态交互丰富的 Vue 应用。建议读者在实际项目中多尝试通过 mounted 实现 DOM 操作，逐步掌握这一核心技能。
提示：实践时可尝试在
mounted中实现一个动态加载图片的组件，或通过window.scrollTo控制页面滚动，进一步巩固相关知识。