Vue的生命周期及钩子函数详解
想要直观的了解Vue的生命周期及钩子函数,离不开一张图:Vue实例的“生命周期图”。
大家可以去官网查看或者保存下来这张生命周期图示。
官网地址:Vue官网生命周期图示
我们接下来的讲解,将依据这张图来进行。
生命周期图示解释:
- 图上绿色的框是一个一个的步骤。
- 红色的圆角框就是Vue的钩子函数。
- 黄色的菱形框就是判断。
Vue的生命周期指的是什么?
Vue的生命周期通俗来讲就是我们用Vue写的网页在浏览器运行起来之后,我们写的代码要在内存里执行。例如我们都会写的var vm = new Vue();
,就是new
出来了一个Vue 实例。这个实例从创建一直到我们关掉浏览器这个实例消亡,这一段时间里,Vue这个框架干了啥,Vue的实例做了啥,先做啥,后做啥,这一系列事情的关系是怎样的,这就是Vue的生命周期。
Vue的生命周期分三个阶段:创建阶段,运行阶段,销毁阶段。
在图中,我对生命周期各个部分进行了标注并做了一些必要的解释。
流程解释(12步对应图中操作):
- 生成一个Vue实例,执行钩子函数
beforeCreate()
。【实例创建前】 - 对实例进行初始化。
- 把实例成员挂载到
view model
身上,执行钩子函数created()
。【实例创建后】 - 判断有无
el
对象【el对象用来指明我们控制的视图是那一区域】。 - 如果有
el
对象,判断是否使用了模板。 - 如果使用了模板,则按照编译模板的方法去做,如果没有则把
el
控制的视图区域当做模板来渲染。执行钩子函数beforeMount()
。【实例挂载前】
解释一下
beforeMount()
时都干了什么:我们都知道,页面在加载时,会在内存里生成一个我们页面的DOM树,
beforeMount
时就会通过el
对象找到我们要控制的视图区域,然后把视图区域的那个DOM节点及其子节点整体的复制到一份新开辟出来的内存空间中,我们接下来对视图的所有操作都会在这个虚拟空间中进行,在操作完毕之后,Vue就会执行下一步。
-
把经过更改的新的
el
视图区域,替换掉原来的el
视图区域。执行钩子函数Mounted()
【实例挂载后】。 -
进入运行阶段,运行阶段就是进行一些操作了,执行钩子函数
beforeUpdate()
。【数据更新前】 -
操作完毕之后,把这些数据渲染到页面上,执行钩子函数
updated()
。【数据更新后】运行阶段是个圆,说明运行阶段可能执行0次,也可能是执行n次的。
比如:我要是只看看页面就完事,那运行阶段一次都不执行,但是如果说我要在在页面上添加数据,不能说填加完一条数据,运行阶段执行一遍之后就进入实例的销毁阶段了,这个显然是不合理的。
-
进入销毁阶段,执行钩子函数
beforeDestroy()
【实例销毁前】 -
进行销毁,拆卸监视器、子组件和事件侦听器。
-
销毁完成,执行钩子函数
destroyed()
。【实例销毁后】
- 生命周期中的钩子函数是Vue在它生命周期中必须要执行到的事件,这些事件其实就是函数。
- 当然这些事件是允许我们程序员来编写代码的,以此当Vue的生命周期走到这里时,来进行我们想要的操作。
- 一个实例在创建阶段和销毁阶段的六个钩子函数是永远执行一次的。执行过去了,就不会再次执行了。
在图中我提到:在Vue的生命周期执行完init Events
之后我们才能访问我们定义的实例成员,并且这个点也是最早可以访问到实例成员的点,为了验证这个,我们看一段代码。
<body>
<div id="app"></div>
//这里的路径为本机上的vue.js路径
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
msg : '我是初始值'
},
methods : {
show : function(){
console.log(this.msg);
}
},
beforeCreate(){
console.log(this.msg);
},
created(){
console.log(this.msg);
}
});
</script>
</body>
运行结果截图:
可以看到在beforeCreate()
的时候,我们输出的是undefined
,而在 created()
后就输出了msg
的值。
这说明在Vue的实例成员是在created
之后,才挂载到了我们的vm
身上,所以在created
之后再访问就能访问到我们的实例成员了。
生命周期的作用:
简单来说,了解了Vue的生命周期,我们就知道了在实例进行到某个阶段,我们可以做些什么,或者说我们的这个操作要在Vue的那个阶段,那个位置执行才合适,这对我们写Vue的代码很有帮助。