持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

Vue生命周期

1.什么是生命周期？

a.生命周期又叫生命周期回调函数，生命周期函数，生命周期钩子
b.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
c.生命周期函数的名字不可更改，但函数的具体内容四程序员需求编写的
d.生命周期函数中的this指向是vn或者组件实例对象

2.生命周期分析

a.分析图

一：创建（创建Vue实例）

1.beforeCreate

2.created

这两个接口都是在创建阶段触发,但是两个接口又有所不同, beforeCreate比created要先触发，即vue实例初始化后，beforeCreate没有进行数据读取前就触发如果在，此时进行读取data中的数据就会提示unfined。created 是在实例创建完成后再被调用，此时data中的数据已经写入完成，但是还没有进行dom的挂载，也就还没有与页面进行关联,下面进入挂载阶段。
小结: beforecreated: el和data并未初始化 created:完成了data 数据的初始化,el没有

二：挂载（data数据渲染到el）

3.beforeMount

4.mounted

beforemount 是在挂载之前触发，仅对模板进行解析，如果此时输出需要挂载的dom的inerHTML的话，会将模板原样输出，并没有将数据进行渲染。
mounted是在dom挂载之后，可以将data中的数据渲染的页面上。该阶段之后就进入更新阶段。
小结: beforeMount：完成了el和 data初始化，mounted :完成挂载

三：更新（监测data变化更新el）

5.beforeUpdate

6.updated

小结：这两个接口的差异主要在于有没有对页面dom进行渲染。在我们对data中的数据进行修改，且修改完成后触发beforeupdate ，此时data中的属性值已经是修改完成的状态，但是没有对页面的dom进行渲染。update 就是将数据渲染到页面上。

阶段四：销毁（接触data与el的绑定关系）

7.beforeDestroy
8.Destroyed

销毁阶段(destory)，在一个实例被销毁后，该实例所绑定的所有事件都会失效，监听器也会被移除。该阶段对应两个接口beforeDestroy和 destroyed。
小结: beforeDestory是在实例需要被销毁但是还没有销毁之前调用，此时该实例的绑定的各类事件、监听器仍然可用。destroyed是在实例销毁后调用，此时该实例的所有东西都不能使用，但是页面上的数据仍保持页面最后一次渲染的数据。

总结生命周期

常用的生命周期钩子

a.mounted发送ajax请求，启动定时器，绑定自定义事件，订阅消息的能初始化操作 b.beforeDestroy清除定时器，解绑自定义事件，取消订阅消息等收尾工作

关于销毁Vue实例

a.销毁后借助Vue开发者工具看不到任何信息 b.销毁后自定义事件会失效，但原生dom事件依然有效 c.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了

注意点: vue生命周期钩子不能使用箭头函数

function函数: 钩子中的this指向 vue实例

箭头函数: 钩子中的this指向window