大家好，我是小杨，一个干了6年前端的老油条。今天想和大家聊聊Vue生命周期里那些"约定俗成"的做法背后的原因，特别是为什么我们总在mounted里发网络请求这个话题。
记得我刚学Vue那会儿，看到生命周期钩子函数一堆，什么created、mounted傻傻分不清楚，最懵的就是："为啥前辈们的代码都在mounted里写axios请求？created不是更早执行吗？早点发请求不是更好吗？" 今天我就用最直白的话给大家讲明白。
一、Vue生命周期快速导览
先上个我手绘的流程图（脑补一下），Vue实例的生命周期大概是这样：
text
复制代码
开始 → beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
用大白话说就是：
出生阶段（创建）
挂载阶段（上树）
成长阶段（更新）
凉凉阶段（销毁）
二、为什么是mounted？
重点来了！为什么网络请求推荐放在mounted而不是created？这里有个关键点：
javascript
复制代码
export default {
async created() {
// 我在这里发请求会怎样？
const res = await axios.get('/api/data')
this.data = res.data
// 危险操作！
document.querySelector('#myDiv').innerHTML = '提前操作DOM可能会翻车'
},
mounted() {
// 这里才是安全的操作区
console.log(document.querySelector('#myDiv')) // 保证能拿到元素
}
}
三个核心原因：
DOM是否就绪：created时模板还没编译成真实的DOM，mounted时才真正挂载完成。就像装修房子，created时刚买好建材，mounted时才算装修完能住人。
SSR兼容性：如果是服务端渲染(SSR)，created会在服务端执行，而mounted只会在客户端执行。把有副作用的操作（比如访问window对象）放mounted能避免报错。
用户体验：虽然created更早发请求，但实际差距只有几毫秒，用户根本感知不到区别。相比之下，确保DOM就绪更重要。
三、我的翻车现场
刚入行时我写过这样的代码：
javascript
复制代码
created() {
fetchData().then(data => {
this.list = data
// 这里想立即操作DOM
this.$refs.listContainer.scrollTo(0, 100) // 报错！$refs还没挂载
})
}
结果当然是页面炸了，$refs根本拿不到元素。后来才明白，这就好比孩子还没出生（DOM没挂载）就想给他穿衣服，能不报错吗？
四、特殊情况怎么办？
当然也有例外情况：
如果你不需要操作DOM，只是获取数据，created也可以
使用keep-alive时，可以用activated钩子
对于SSR项目，可能要在created里预取数据
但记住一个黄金法则：只要涉及DOM操作，请老老实实放mounted里！
五、最佳实践建议
经过多年踩坑，我的建议是：
默认放mounted
在组件created时初始化数据
需要操作DOM的方法都写在mounted之后
清理操作（如定时器）放beforeDestroy
javascript
复制代码
export default {
data() {
return {
loading: false,
list: []
}
},
async mounted() {
this.loading = true
try {
this.list = await fetchData()
// 这里可以安全操作DOM
this.$nextTick(() => {
this.$refs.container.scrollTop = 0
})
} finally {
this.loading = false
}
}
}
六、总结
Vue的生命周期就像人的一生，每个阶段都有适合做的事情。在正确的时间做正确的事，代码才会更健壮。下次当你准备写网络请求时，不妨想想小杨的忠告：除非有特殊需求，否则mounted永远是你的好朋友！
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群：906392632
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！