【超详细】Vue生命周期 钩子函数

生命周期是什么

生命周期：一个对象从生成(new)到销毁(destory)的过程，就是这个vue实例的生命周期。

生命周期函数是在某个时刻会自动执行的函数。

每个vue在被创建时都要经过一系列的初始化过程，例如：创建实例、装载模板、渲染模板、数据监听、编译模板、将实例挂载到DOM并在数据变化是对DOM进行更新。在vue在初始化的过程中也会运行一些叫做生命周期钩子的函数，这时候用户可以在不同的阶段添加自己的代码。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期的三个阶段

三个阶段分别是：创建-->更新-->销毁

1. 第一阶段：有四个钩子函数(beforeCreate、created、beforeMount、mounted)

2. 第二阶段：有两个钩子函数(beforeUpdate、updated)

3. 第三阶段：有两个钩子函数(beforeDestroy、destroyed) 

生命周期的钩子函数

函数	调用时间
beforeCreate	vue实例初始化之前调用
created	vue实例初始化之后调用
beforeMount	挂载到DOM树之前调用
mounted	挂载到DOM树之后调用
beforeUpdate	数据更新之前调用
updated	数据更新之后调用
beforeDestroy	vue实例销毁之前调用
destroyed	vue实例销毁之后调用

生命周期图示

要简单的理解这幅图的含义，我们可以根据图片上的注释去理解。