⚡ 30 秒速记

• 核心判断：生命周期是框架围绕创建、挂载、更新和卸载安排用户副作用的时序契约
• 原理主线：围绕 「基础知识」、「源码解读」、「几种不常用的钩子」 建立输入、状态变化与输出之间的因果关系
• 文章范围：通过源码详细解析Vue生命周期的各个阶段，介绍每个生命周期钩子的作用和使用场景，帮助开发者深入理解Vue组件的创建、挂载、更新和销毁过程。
• 边界与代价：父子组件顺序、异步调度和 React 并发渲染会让“调用过函数”不等于“已经提交到界面”
• 工程落地：副作用必须放在语义匹配的阶段，并在重跑、卸载或依赖变化时正确清理

生命周期是框架在组件创建、挂载、更新和销毁过程中，留给业务代码执行副作用的固定时机。 以 Vue 2 为例，beforeCreate 在状态初始化前触发，created 之后才能访问 data、computed 等；真实 DOM 则要到 mounted 后才适合操作。数据变化会由渲染 Watcher 推动更新，并在渲染前后触发对应钩子。销毁阶段应清理定时器和监听，同时避免在 updated 中反复改数据造成循环更新。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

基础知识

钩子函数

其实和回调是一个概念，当系统执行到某处时，检查是否有hook(钩子)，有的话就会执行回调。

通俗的说，hook就是在程序运行中，在某个特定的位置，框架的开发者设计好了一个钩子来告诉我们当前程序已经运行到特定的位置了，会触发一个回调函数，并提供给我们，让我们可以在生命周期的特定阶段进行相关业务代码的编写

总的来说，Vue的生命周期可以分为以下八个阶段

• beforeCreate 实例创建前
• created 实例创建完成
• beforeMount 挂载前
• mounted 挂载完成
• beforeUpdate 更新前
• updated 更新完成
• beforeDestory 销毁前
• destoryed 销毁完成

beforeCreate

这个钩子是new Vue()之后触发的第一个钩子，在当前阶段中data、methods、computed以及watch上的数据和方法均不能被访问。