Vue的学习总结自测（三）—— vue生命周期、Vue 的父组件和子组件生命周期钩子函数执行顺序、生命周期内调用异步请求

本文深入解读Vue的完整生命周期，包括创建、初始化、挂载、更新和销毁等阶段，详细阐述了各生命周期钩子函数的作用及执行顺序。同时，探讨了父组件与子组件生命周期钩子的执行流程，以及在哪些生命周期内适合调用异步请求。

（1）生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）各个生命周期的作用
用表格描述：


beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，重新构建的虚拟 DOM与上次的虚拟dom ,通过diff算法进行对比
updated	组件更新之后，数据更改完成，dom也重新render完成
activited	keep-alive 专属，组件被激活时调用
deadctivated	keep-alive 专属，组件被销毁时调用
beforeDestory	组件销毁前调用，做一些善后工作，例如清楚计时器，清除非指令绑定的事件等等
destoryed	组件销毁后调用

在这里插入图片描述

8、Vue 的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；
阶段可以访问data，使用watcher、events、methods，也就是说数据观测(data observer) 和event/watcher 事件配置已完成。
ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；