一、钩子函数
在了解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程序各系统阶段进行程序应用或处理系统消息。