Vue生命周期那些事儿：请求到底该放在哪？老司机带你避坑！

大家好，我是小杨，一个做了6年前端的老司机。今天咱们聊聊Vue生命周期中一个经典问题：什么时候发送请求最合适？这个问题看似简单，但里面有不少门道，新手很容易踩坑。下面我就结合自己的经验，跟大家好好唠唠。

一、Vue生命周期快速回顾

先简单过一下Vue的生命周期，这对理解后面的内容很重要：

beforeCreate：实例刚创建，数据观测和事件配置都没完成
created：实例创建完成，数据观测已完成，但DOM还没生成
beforeMount：模板编译完成，但还没挂载到页面
mounted：DOM挂载完成
beforeUpdate：数据更新前
updated：数据更新后
beforeDestroy：实例销毁前
destroyed：实例销毁后

二、请求到底放哪最合适？

1. 为什么不推荐放在beforeMount？

javascript 复制代码

beforeMount() {
  // 不推荐在这里发请求
  axios.get('/api/data').then(res => {
    this.data = res.data
  })
}

问题：这时候模板虽然编译好了，但DOM还没挂载。如果请求很快返回，可能会在DOM还没准备好的情况下就尝试操作DOM，容易出问题。

2. 为什么不推荐放在mounted？

javascript 复制代码

mounted() {
  // 可以但不推荐
  axios.get('/api/data').then(res => {
    this.data = res.data
  })
}

问题：mounted确实可以放请求，但有个小缺点------这时候DOM已经渲染完成了，如果请求返回后需要重新渲染DOM，用户会先看到空白或默认状态，体验不太好。

3. 最佳实践：放在created

javascript 复制代码

created() {
  // 推荐在这里发请求
  axios.get('/api/data').then(res => {
    this.data = res.data
  })
}

为什么created是最佳选择？

数据观测已经完成，可以安全地设置响应式数据
这时候发请求，等数据返回时DOM可能刚好完成挂载，减少等待时间
避免在beforeMount中可能出现的DOM操作问题

三、实际开发中的进阶用法

在实际项目中，我通常会这样做：

1. 结合async/await

javascript 复制代码

async created() {
  try {
    const response = await axios.get('/api/my-data')
    this.userData = response.data
  } catch (error) {
    console.error('获取数据失败:', error)
    this.error = '加载数据出错，请稍后重试'
  }
}

2. 多个请求并行处理

javascript 复制代码

created() {
  Promise.all([
    axios.get('/api/user'),
    axios.get('/api/settings')
  ]).then(([userRes, settingsRes]) => {
    this.user = userRes.data
    this.settings = settingsRes.data
  })
}

3. 结合路由守卫

对于需要权限校验的页面，我通常会在路由守卫中先发请求：

javascript 复制代码

// 路由配置中
{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: async (to, from, next) => {
    try {
      const res = await checkAuth()
      if (res.valid) {
        next()
      } else {
        next('/login')
      }
    } catch (error) {
      next('/error')
    }
  }
}

四、特殊场景处理

1. SSR（服务端渲染）场景

在Nuxt.js等SSR框架中，请求通常放在asyncData 或fetch中：

javascript 复制代码

// Nuxt.js示例
async asyncData({ $axios }) {
  const posts = await $axios.$get('/api/posts')
  return { posts }
}

2. 需要DOM信息的请求

极少数情况下，请求参数需要DOM信息（如元素尺寸），这时才需要放在mounted中：

javascript 复制代码

mounted() {
  this.$nextTick(() => {
    const width = this.$refs.container.offsetWidth
    axios.get(`/api/data?width=${width}`).then(...)
  })
}

五、总结与最佳实践

经过多年实践，我总结出以下经验：

普通数据请求：优先放在created
需要DOM信息的请求：放在mounted + nextTick中
SSR应用：使用框架提供的特殊钩子(asyncData/fetch)
权限校验：考虑放在路由守卫中
多个相关请求：使用Promise.all并行发送

记住，没有绝对的对错，只有适合不适合。关键是要理解每个生命周期的特点，根据实际需求选择最合适的时机。

希望这篇文章能帮你避开一些坑。如果有其他问题，欢迎在评论区留言，我会尽量解答。下次见！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

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