Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
image.png

各个生命周期的作用

生命周期 描述
beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成， $el 还不可用
beforeMount 在挂载开始之前被调用，相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate 组件数据更新之前被调用，发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
activited keep-alive 专属，组件被激活时调用
deactivated keep-alive 专属，组件被销毁时调用
beforeDestroy 组件销毁前调用
destroyed 组件销毁后调用
errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

在哪个生命周期内调用异步请求

可以在钩子函数 created 、beforeMount 、mounted 中进行调用，因为在这三个钩子函数中， data 已经创建，可以将服务端返回的数据进行赋值。但是一般会在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

  • 能更快获取到服务端数据，减少页面 loading 时间
  • ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性

    在哪个阶段才能访问操作 DOM

    在钩子函数 mounted 被调用前， Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM 。

    父组件监听子组件的生命周期

    比如有父组件 Parent 和子组件 Child ，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现： ```vue // Parent.vue

// Child.vue mounted() { this.$emit(“mounted”); }

  1. 以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：
  2. ```vue
  3. // Parent.vue
  4. <Child @hook:mounted="doSomething" />
  6. // Child.vue
  7. mounted() {
  8.     // doSomething
  9. }

官网地址：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90