这是我参与「第四届青训营」笔记创作活动的第4天

概述

Vue前端项目都需要创建Vue应用来完成页面的搭建，而每一个Vue应用都是通过Vue函数创建一个Vue实例开始的。每个Vue实例从创建开始，都需要完整地经过其生命周期，最后再销毁，接下来对具体内容进行讲解。

var vm = new Vue({
   //do something
})

下图是Vue官网的Vue生命周期钩子示意图，可以看到一个Vue实例的生命周期包含了很多步骤，其中一共包括了11个钩子函数。

生命周期钩子函数

生命周期钩子函数是Vue框架的内置函数，在Vue的生命周期阶段各个阶段中会自动执行。在特定的时间节点，其执行特定的操作，功能也各不相同。

初始化阶段发生在组件创建后，也就是new Vue()语句执行后的一段时间内，包括两个函数beforeCreate和created。

beforeCreate：在init之后，此时实例的el和data都没有初始化。因此不能访问data、method，一般在这个阶段不进行操作。

created：发生在实例创建后，vue模板中的data和method都已经被初始化，属性也完成绑定。此时可以调用data和method的数据和方法，一般在created对vue实例进行初始化操作。

挂载阶段完成的是将数据、方法挂载到网页实例上的任务。

beforeMount：此时已经编译完成，但还没有渲染到页面中，el存在就会显示el。在这里会触发渲染前最后一次数据更改的机会，我们可以从这里获得初始的网页数据。

mounted：其实已经是在挂载后了，此时模板被渲染成真实的DOM，页面已经渲染完成。

更新阶段主要是负责网页在运行过程中的一些view变化，会在这一阶段依次地更新页面，来完成与访客的交互。

beforeUpdate：数据更新前的状态。该函数在重新渲染之前触发，在虚拟dom更新前，会进行与上一次的虚拟dom对比，只有发现有所改变才会进行该函数。

updated：数据已经更新完成，此时dom已经被重新渲染。因此，在这一基础上，我们可以在该函数中做些基于新页面的更新操作。

销毁阶段主要负责销毁实例对象、监听器和回收销毁对象的内存。

beforeDestroy：负责清除定时器相关内容，主要是防止内存泄漏现象。

destroyed：销毁对象后调用，所有的子实例被销毁，所有的事件监听器会被移除。

下面的几个钩子函数不是很常用，因此简略地写一下对应功能。

activated: 被keep-alive缓存的组件激活时调用。

decativeted: 被keep-alive缓存的组件停用时调用。

errorCaptured: 一般用于异常捕捉中，用来捕获vue组件中抛出的异常，该钩子有三个参数：错误对象、组件实例和错误信息串。它和addEventListener类似，如果使用false作为函数返回值可以继续向上抛出异常。