Vue实例生命周期函数（钩子函数）详解

一、钩子函数

在了解vue生命周期函数之前，我们先看看啥叫"钩子函数"？百度一下是这样一段官方解释：“钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。”
简单理解，就是一些在系统消息触发时被系统自动调用的函数，像一个"钩子"，将我们想要处理系统消息的内容挂上。 Vue生命周期函数就是常见的钩子函数之一。

二、vue生命周期

- 展示
先看看官方图示：

- 分析
1.beforeCreate和created函数
从官方图可知，vue实例创建后需要进行事件、周期初始化，然后开始元素属性等注入。这个过程我们通过在控制台输出做比较：在注入前(beforeCreate())各属性undefined；注入后(created())各属性进行绑定已经呈现出来。ps：此时el仍然未挂载，继续分析。

2.beforeMount和mounted生命周期
创建完成后开始判断是否有指定"el"元素，如果有继续下一步，没有则等待调用$mount(el)函数。继续判断是否有指定"template"元素，如果有则按模版渲染，没有则按照外层HTML.DOM结构。挂载前(beforeMount())将前面指定好的vm.$el渲染完成；挂载后(mounted())已将vm.$el挂载到实例上。

3.beforeUpdate和updated生命周期
数据更新(update)是个快速的过程，通过控制台输出不难看出，当data中message属性的值更改时，虚拟DOM进行重新渲染，触发更新前(beforeUpdate())和更新后(updated())两个生命周期函数。

4.beforeDestroy和destroyed生命周期
vm.$destroy()是vue内部函数，执行对组件、监听器、实例的解绑，销毁现有DOM结构，恢复原生DOM。这里通过从控制台执行$destroy()触发销毁前(beforeDestroy())和销毁后(destroyed())两个生命周期函数。

至此，一个vue实例的生命周期圆满。实战中可运用这些钩子函数在vue程序各系统阶段进行程序应用或处理系统消息。