Vue生命周期那些事儿 - 为什么我总在mounted里发请求?

大家好,我是小杨,一个干了6年前端的老油条。今天想和大家聊聊Vue生命周期里那些"约定俗成"的做法背后的原因,特别是为什么我们总在mounted里发网络请求这个话题。

记得我刚学Vue那会儿,看到生命周期钩子函数一堆,什么created、mounted傻傻分不清楚,最懵的就是:"为啥前辈们的代码都在mounted里写axios请求?created不是更早执行吗?早点发请求不是更好吗?" 今天我就用最直白的话给大家讲明白。

一、Vue生命周期快速导览

先上个我手绘的流程图(脑补一下),Vue实例的生命周期大概是这样:

text 复制代码
开始 → beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

用大白话说就是:

  1. 出生阶段(创建)
  2. 挂载阶段(上树)
  3. 成长阶段(更新)
  4. 凉凉阶段(销毁)

二、为什么是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')) // 保证能拿到元素
  }
}

三个核心原因:

  1. DOM是否就绪:created时模板还没编译成真实的DOM,mounted时才真正挂载完成。就像装修房子,created时刚买好建材,mounted时才算装修完能住人。
  2. SSR兼容性:如果是服务端渲染(SSR),created会在服务端执行,而mounted只会在客户端执行。把有副作用的操作(比如访问window对象)放mounted能避免报错。
  3. 用户体验:虽然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里!

五、最佳实践建议

经过多年踩坑,我的建议是:

  1. 默认放mounted
  2. 在组件created时初始化数据
  3. 需要操作DOM的方法都写在mounted之后
  4. 清理操作(如定时器)放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

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关推荐
JarvanMo1 小时前
Flutter. FractionallySizedBox
前端
EndingCoder2 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手2 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评2 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组2 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg6 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz8 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码8 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v8 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山8 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南