更新记录
- 2023-09-13：新增生命周期具体分析，新增“数据请求在created和mouted的区别”章节。
Vue生命周期
总结
常用的生命周期钩子：
mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等首尾工作.
关于销毁Vue实例：
- 销毁后借助Vue开发者工具看不到任何信息。
- 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
- beforeCreate和created指的并不是vm创建之前和创建之后，指的是数据监测、数据代理之前和之后。
具体分析
beforeCreate -> created
- 初始化
vue实例，进行数据观测
created
- 完成数据观测，属性与方法的运算，
watch、event事件回调的配置 - 可调用
methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算 - 此时
vm.$el并没有被创建
created -> beforeMount
- 判断是否存在
el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译 - 优先级：
render>template>outerHTML vm.el获取到的是挂载DOM的
beforeMount
- 在此阶段可获取到
vm.el - 此阶段
vm.el虽已完成DOM初始化，但并未挂载在el选项上
beforeMount -> mounted
- 此阶段
vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM
mounted
vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM
beforeUpdate
- 更新的数据必须是被渲染在模板上的（
el、template、render之一） - 此时
view层还未更新 - 若在
beforeUpdate中再次修改数据，不会再次触发更新方法
updated
- 完成
view层的更新 - 若在
updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）
beforeDestroy
- 实例被销毁前调用，此时实例属性与方法仍可访问
destroyed
- 完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
- 并不能清除DOM，仅仅销毁实例
使用场景分析
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务，如设置全局变量、引入插件等 |
| created | 组件初始化完毕，各种数据可以使用，常用于异步数据获取 |
| beforeMount | 未执行渲染、更新，dom未创建，可以在此阶段进行一些DOM操作，如修改DOM结构、插入其他DOM元素等 |
| mounted | 初始化结束，dom已创建，可用于获取访问数据和dom元素，如初始化第三方库、绑定事件监听器等 |
| beforeUpdate | 更新前，可用于获取更新前各种状态，可以在此阶段进行一些数据的准备工作或修改，如计算属性、监听器的更新等。 |
| updated | 更新后，所有状态已是最新，可以在此阶段执行一些需要根据数据变化做出响应的操作，如更新DOM、调用第三方库的方法等。 |
| beforeDestroy | 销毁前，可用于一些定时器或订阅的取消，取消事件监听器、清除定时器、解绑全局事件等。 |
| destroyed | 组件已销毁，作用同上，可以在此阶段进行一些善后工作，如释放资源、清理内存等。 |
数据请求在created和mouted的区别
两者的相同点：都能拿到实例对象的属性和方法。
两者的不同点：触发时机不同，created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成；mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的。
放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在created生命周期当中。