⚡ 30 秒速记

• 生命周期标记初始化、挂载、更新与卸载阶段
• Vue 2 的 created 可用状态，节点要等挂载
• 更新后读取页面，使用对应更新时机
• 定时器、监听和外部实例成对清理
• 缓存停用与真正卸载分开处理

生命周期告诉你组件走到哪一步，适合做什么，而不是提供几处随便塞代码的位置。 在 Vue 2 中，状态初始化后可以读取数据，但操作已挂载节点要等相应挂载阶段；数据改变后的页面读取也要等刷新完成。建立的订阅、定时器和第三方实例需要成对清理。使用缓存组件时，离开画面不一定已经卸载，要区分停用与销毁。

版本校准： 本文出现 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上的数据和方法均不能被访问。

created

这个钩子在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果你非要想，可以通过vm.$nextTick来访问Dom。

beforeMount

这个钩子发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated

mounted

这个钩子在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。也可以向后台发送请求，拿到返回数据

beforeUpdate

这个钩子发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染