Vue的生命周期--【day 2】

一、Vue生命周期是什么？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

简单说vue的生命周期就是，从创建vue对象到销毁vue对象的过程。

vue生命周期可以分为八个阶段，分别是：

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）
 

组件具体的方法为:

beforeCreate () {} 创建实例以前, 此时的 DOM 还是语法, data 内的数据还没有

created () {} 创建实例以后, 此时 DOM 还是语法, data 内已经有数据了

beforeMount () {} 挂载以前, 渲染页面以前, 此时 DOM 还是语法, data 内已经有数据了

mounted () {} 挂载以后, 渲染页面以后, 此时 DOM 正常了, data 内的数据正常

beforeUpdate () {} 更新以前, 该组件内容修改之前, data 内的数据是修改前的数据

undated () {} 更新以后, 该组件内容修改之后, data 内的数据就是修改后的数据

beforeDestroy () {} 销毁前, 当你需要销毁该组件的时候, 销毁之前使用

destroyed () {} 销毁后, 组件完全销毁完毕

---

二、钩子函数

解释: 钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行.

作用:特定的时间，执行特定的操作

分类:四大阶段，八大方法

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

一、创建（实例）
1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）
使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用
2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el）
使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里

二、载入（数据）
1、beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el）
2、mounted：数据和DOM都已经被渲染出来了
使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

三、更新
1、beforeUpdate：检测到数据更新时，但在DOM更新前执行
2、updated：更新结束后执行
使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁
1、beforeDestroy：当要销毁vue实例时，在销毁前执行
2、destroyed：销毁vue实例时执行