前端-Vue的生命周期和生命周期的四个阶段

       

目录

1) 创建阶段（beforeCreate → created）

2) 挂载阶段（beforeMount → mounted）

3) 更新阶段（beforeUpdate → updated）

4) 销毁阶段（beforeDestroy → destroyed）

---

当我们在使用Vue框架的时候，会产生一个问题：

                什么时候可以发送初始化渲染请求？（越早越好）

                什么是时候可以开始操作dom？（至少dom得渲染出来）

        Vue的生命周期：一个Vue实例从创建到销毁的过程。

        生命周期四个阶段：1.创建 2.挂载 3.更新 4.销毁

1) 创建阶段（beforeCreate → created）

发生了什么：

• 实例初始化，注入（provide/inject）、事件系统搭好。

• 到了 created：data/computed/methods/props 都已可用，但 DOM/$el/$refs 还没生成。

推荐做的事：

• 初始化纯数据状态、同步准备工作。

• 发起数据请求（常见选择），不依赖 DOM 时放在 created 更快。

• 读取路由参数、发起 store 初始化。

避免：

• 在 beforeCreate/created 里访问 this.$el / this.$refs / DOM。

• SSR 场景中直接用 window/document（请做环境判断）。

示例：

created() {// 可用：this.xxx、this.$store、this.$routerthis.loadList(); // 不依赖 DOM 的异步请求
}

2) 挂载阶段（beforeMount → mounted）

发生了什么：

• 首次渲染 Virtual DOM → 真实 DOM，$el/$refs 就绪。

推荐做的事：

• 任何依赖 DOM 的操作：测量元素宽高、获取滚动高度、聚焦输入框。

• 初始化三方 DOM 插件（ECharts、Map、Swiper…）。

• 需要拿到真实尺寸/位置信息 的逻辑放这里。

避免：

• 在 mounted 里频繁改数据导致立刻再次更新（必要时用 this.$nextTick）。

示例：

mounted() {this.chart = echarts.init(this.$refs.bar);this.chart.setOption(this.option);// 下一轮 DOM 更新后再拿最新布局this.$nextTick(() => {const h = this.$refs.panel.offsetHeight;// ...基于真实尺寸的逻辑});
}

3) 更新阶段（beforeUpdate → updated）

发生了什么：

• 响应式数据变化触发重新渲染。

• beforeUpdate：数据已改，DOM 尚未 patch。

• updated：DOM 已 patch，与数据同步完成。

推荐做的事：

• 需要在 DOM 更新后读写布局 → 放 updated 或 this.$nextTick。

• 更常见：使用 watcher 精准响应某个字段变化，而不是在 updated 里“大包大揽”。

避免：

• 在 updated 里再无条件改数据 → 造成无限更新循环。

• 把业务逻辑都塞在 updated（会很频繁触发）

示例（精确监听 + nextTick）：

watch: {pageSize() {this.$nextTick(() => {// DOM 已与新 pageSize 对齐this.fixTableHeight();});}
}

4) 销毁阶段（beforeDestroy → destroyed）

发生了什么：

• 即将解绑指令、事件、子组件，实例失去响应能力。

• destroyed 后，this 还在，但别再改数据（无意义）。

推荐做的事：

• 清理资源：定时器、addEventListener、消息订阅、WebSocket、EventBus、三方实例（ECharts.dispose）。

• 取消未完成的请求（AbortController / axios cancel token）。

避免：

• 遗漏清理 → 内存泄漏（列表/标签页切换尤甚）。

示例：

beforeDestroy() {clearInterval(this.timer);window.removeEventListener('resize', this.onResize);this.chart && this.chart.dispose();this.chart = null;
}