想要直观的了解Vue的生命周期及钩子函数,离不开一张图:Vue实例的“生命周期图”。
大家可以去官网查看或者保存下来这张生命周期图示。
官网地址:Vue官网生命周期图示
我们接下来的讲解,将依据这张图来进行。
- 图上绿色的框是一个一个的步骤。
- 红色的圆角框就是Vue的钩子函数。
- 黄色的菱形框就是判断。
Vue的生命周期通俗来讲就是我们用Vue写的网页在浏览器运行起来之后,我们写的代码要在内存里执行。例如我们都会写的,就是出来了一个Vue 实例。这个实例从创建一直到我们关掉浏览器这个实例消亡,这一段时间里,Vue这个框架干了啥,Vue的实例做了啥,先做啥,后做啥,这一系列事情的关系是怎样的,这就是Vue的生命周期。
在图中,我对生命周期各个部分进行了标注并做了一些必要的解释。
- 生成一个Vue实例,执行钩子函数。【实例创建前】
- 对实例进行初始化。
- 把实例成员挂载到身上,执行钩子函数。【实例创建后】
- 判断有无对象【el对象用来指明我们控制的视图是那一区域】。
- 如果有对象,判断是否使用了模板。
- 如果使用了模板,则按照编译模板的方法去做,如果没有则把控制的视图区域当做模板来渲染。执行钩子函数。【实例挂载前】
解释一下时都干了什么:
我们都知道,页面在加载时,会在内存里生成一个我们页面的DOM树,时就会通过对象找到我们要控制的视图区域,然后把视图区域的那个DOM节点及其子节点整体的复制到一份新开辟出来的内存空间中,我们接下来对视图的所有操作都会在这个虚拟空间中进行,在操作完毕之后,Vue就会执行下一步。
- 把经过更改的新的视图区域,替换掉原来的视图区域。执行钩子函数【实例挂载后】。
- 进入运行阶段,运行阶段就是进行一些操作了,执行钩子函数。【数据更新前】
- 操作完毕之后,把这些数据渲染到页面上,执行钩子函数。【数据更新后】
运行阶段是个圆,说明运行阶段可能执行0次,也可能是执行n次的。
比如:我要是只看看页面就完事,那运行阶段一次都不执行,但是如果说我要在在页面上添加数据,不能说填加完一条数据,运行阶段执行一遍之后就进入实例的销毁阶段了,这个显然是不合理的。
- 进入销毁阶段,执行钩子函数【实例销毁前】
- 进行销毁,拆卸监视器、子组件和事件侦听器。
- 销毁完成,执行钩子函数。【实例销毁后】
- 生命周期中的钩子函数是Vue在它生命周期中必须要执行到的事件,这些事件其实就是函数。
- 当然这些事件是允许我们程序员来编写代码的,以此当Vue的生命周期走到这里时,来进行我们想要的操作。
- 一个实例在创建阶段和销毁阶段的六个钩子函数是永远执行一次的。执行过去了,就不会再次执行了。
在图中我提到:在Vue的生命周期执行完之后我们才能访问我们定义的实例成员,并且这个点也是最早可以访问到实例成员的点,为了验证这个,我们看一段代码。
运行结果截图:
可以看到在的时候,我们输出的是,而在 后就输出了的值。
这说明在Vue的实例成员是在之后,才挂载到了我们的身上,所以在之后再访问就能访问到我们的实例成员了。
简单来说,了解了Vue的生命周期,我们就知道了在实例进行到某个阶段,我们可以做些什么,或者说我们的这个操作要在Vue的那个阶段,那个位置执行才合适,这对我们写Vue的代码很有帮助。
到此这篇vue中常用的生命周期钩子函数(vue生命周期函数详解)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/qdvuejs/52827.html