vue生命周期最全学习

一、为什么要学习声明周期

随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。

二、什么是vue的生命周期

    引例：每个人从出生到消失都要经历不同的时间段，但每个时间段年龄段都有不同的事情，则Vue声明周期也是这个意思
   Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2.1、生周期的经历过程

学习Vue声明周期都会从这幅图来学习

.2、生命周期的作用

它的生命周期中有多个事件钩子，让我们在**控制整个vue实例的过程时更容易形成好的逻辑**。

2.3、理解什么是钩子函数

钩子函数：就是在一个**事件触发的时候**，在系统级捕获到了他，然后做一些操作。“钩子”就是在某个阶段**给你一个做某些处理的机会。**
钩子函数：1、是个函数，在系统消息触发时系统调用2、不是用户自己触发
钩子函数的名称是确定的，当系统消息触发，自动会调用。
常见的钩子函数：   react的生命周期函数、vue的生命周期函数，vue的自定义指令等

2.4、Vue生命周期总共有几个阶段

它总共分为8个阶段:创建前/后，挂载入前/后，更新前/后和销毁前/后

2.5、（重点）分别看看vue生命周期的这八个阶段，这八个阶段对应的钩子函数

2.5.1、创建前（beforeCreate）

这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）
使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用

2.5.2、创建后（created）

在这个阶段vue实例已经创建，仍然不能获取DOM节点（有data，没有el）
使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里

2.5.3、载入前（beforeMount）

是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el）    下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

2.5.4、载入后（mounted）

    数据和DOM都已经被渲染出来了，mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

2.5.5、更新前（beforeUpdate）

检测到数据更新时，但在DOM更新前执行，在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

2.5.6、更新后（updated）

更新结束后执行，在这一阶段DOM会和更改过的内容同步。
使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

2.5.7、销毁前（beforeDestory）

当要销毁vue实例时，在销毁前执行
在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

2.5.8、销毁后（destoryed）

销毁vue实例时执行，在销毁后，会触发destroyed钩子函数。

2.6、created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成    html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

2.7、第一次页面加载会触发几个钩子

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

2.8、DOM渲染在那个周期中就已经完成

DOM渲染在mounted中就已经完成了