vue⽣命周期

一. 生命周期是什么?

在 Vue 中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等⼀系列过程。
一个vue实例的创建都对应的一整个完整过程，在这个过程中，每个阶段都会有自己的钩子函数；
Vue 生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义⼀个生命周期方法 (例如 created: () => this.fetchTodos() )

二. 生命周期有哪些

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期。

生命周期	描述
beforeCreate	组件实例被创建之初
created	组件实例已经完全创建
beforeMount	组件挂载之前
mounted	组件挂载到实例上去之后
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据更新之后
beforeDestroy	组件实例销毁之前
destroyed	组件实例销毁之后
activated	keep-alive 缓存的组件激活时
deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

三、⽣命周期整体流程

四. 详细讲解

1. beforeCreate
   在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用;
   在此钩子函数中，还不能访问data或者event或者监听器。
2. created
   在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$elproperty 目前尚不可用。
   到这一步，可以访问data的属性，调用函数，所以，如果项目需要通过异步请求获取数据，就在此钩子函数中执行；
3. beforeMount
   在挂载开始之前被调用：相关的 render 函数首次被调用。
   到这一步，虚拟dom渲染完毕，但是还未挂载到真实dom上。
4. mounted
   实例被挂载后调用，虚拟dom渲染成真实dom，在此生命周期钩子中可以对dom进行操作；
   根据你的实际业务逻辑需求，在此步也可以异步的请求数据；因为生命周期到了这一步可以操作真实dom，所以在此步经常会做一些第三方插件的初始化工作；因为很多第三方的插件都需要获取真实dom，回忆富文本编辑时富文本的初始化操作；
5. beforeUpdate
   更新的数据必须是被渲染在模板上的（ el 、 template 、 render 之⼀）
   此时 view 层还未更新
   若在 beforeUpdate 中再次修改数据，不会再次触发更新方法。
6. updated
   完成 view 层的更新
   若在 updated 中再次修改数据，会再次触发更新⽅法（ beforeUpdate 、 updated ）。
7. beforeDestroy
   实例被销毁前调用，此时实例属性与方法仍可访问。
8. destroyed
   完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
   并不能清除DOM，仅仅销毁实例。

五. 使用场景

beforeCreate	插件开发中执行一些初始化任务
created	组件初始化完毕常用于异步数据获取
beforeMount	未渲染、更新，dom未创建
mounted	初始化结束，dom已创建，用于获取访问数据和dom元素
beforeUpdate	更新前，可用于获取更新前各种状态
updated	更新后，所有状态已是最新
beforeDestroy	销毁前，可用于一些定时器或订阅的取消
destroyed	组件已销毁，可用于一些定时器或订阅的取消