当前位置：首页 > news >正文

详解Vue的生命周期：created和mounted到底该请求谁？

news 2026/3/27 0:06:25

在 Vue 的生命周期中，created和mounted是两个关键阶段，它们在组件初始化过程中扮演不同角色，数据请求的选择取决于业务需求是否依赖 DOM 渲染。以下是具体分析与最佳实践：

一、`created`与`mounted`的核心区别

阶段	触发时机	核心特性	典型用途
`created`	组件实例创建完成，数据观测、事件配置就绪，但DOM 未挂载，`$el`不可用。	可访问`data`、`methods`、`computed`，能发起异步请求，但无法操作真实 DOM。	数据初始化、非 DOM 依赖的异步请求（如 API 调用）、事件监听注册。
`mounted`	组件挂载到 DOM 后触发，`$el`可用，模板已渲染为真实 DOM。	可安全操作 DOM，访问子组件实例（通过`ref`），但数据变更不会重新触发此阶段。	DOM 依赖操作（如插件初始化、DOM 尺寸计算）、需要渲染后数据的异步请求（如图表库）。

二、数据请求：`created`还是`mounted`？

1. 优先选择`created`的场景

目的：尽早获取数据，减少用户等待时间。
适用场景：
- 数据不依赖 DOM 渲染（如用户信息、列表数据）。
- 需在模板渲染前准备好数据（避免闪烁或空状态）。
- 非 DOM 操作（如设置全局状态、发送分析事件）。

示例：

exportdefault{data(){return{userList:[]};},created(){axios.get('/api/users').then(response=>{this.userList=response.data;// 数据在模板渲染前就绪});}};

2. 选择`mounted`的场景

目的：确保 DOM 存在后再执行操作，避免报错。
适用场景：
- 数据请求依赖 DOM 元素（如获取输入框默认值、计算容器高度）。
- 初始化第三方库（如 Chart.js、ECharts、地图插件）。
- 需操作子组件或 DOM 引用（ref）。

示例：

exportdefault{mounted(){constchartDom=this.$refs.chartContainer;// 确保 DOM 存在newChart(chartDom,{type:'bar',data:this.chartData});},data(){return{chartData:{labels:[],datasets:[]}};},created(){axios.get('/api/chart-data').then(response=>{this.chartData=response.data;// 数据在 mounted 前准备好});}};

三、关键注意事项

避免mounted中的竞态条件：
- 若数据在mounted中请求，DOM 可能因异步延迟未更新。此时操作 DOM 需结合this.$nextTick：
```
mounted(){this.$nextTick(()=>{constwidth=this.$el.clientWidth;// 确保 DOM 已渲染});}
```
服务端渲染（SSR）兼容性：
- mounted仅在客户端执行，SSR 环境下不会触发。若需兼容 SSR，数据请求应放在created或asyncData（Nuxt.js）。
性能优化：
- 频繁更新的数据（如实时图表）可在created中初始化空数据，在mounted中启动轮询或 WebSocket 连接。
代码可维护性：
- 将数据请求逻辑封装到methods或actions（Vuex），避免直接在钩子中写复杂逻辑。

四、最佳实践总结

需求类型	推荐钩子	理由
非 DOM 依赖的数据初始化	`created`	尽早获取数据，减少白屏时间，避免模板闪烁。
DOM 依赖的操作或数据请求	`mounted`	确保 DOM 存在，避免操作未渲染的元素导致错误。
兼容 SSR 的数据请求	`created`	`mounted`不在服务端执行，可能引发 hydration 不匹配。
复杂异步流程（如多次请求）	组合使用	在`created`中发起请求，在`mounted`中处理 DOM 或后续逻辑，结合`watch`监听数据变化。

五、示例：完整组件生命周期

exportdefault{data(){return{user:null,chartInstance:null};},created(){// 1. 初始化非 DOM 依赖数据axios.get('/api/user').then(response=>{this.user=response.data;});},mounted(){// 2. 初始化 DOM 依赖操作this.$nextTick(()=>{if(this.user){// 确保数据已加载this.initChart();}});},methods:{initChart(){constdom=this.$refs.chart;this.chartInstance=newChart(dom,{type:'pie',data:this.user.stats});}},beforeDestroy(){// 3. 清理资源if(this.chartInstance){this.chartInstance.destroy();}}};