博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue的生命周期
阅读量:5010 次
发布时间:2019-06-12

本文共 1774 字,大约阅读时间需要 5 分钟。

 

在谈到Vue的生命周期的时候,我们首先需要创建一个实例,也就是在 new Vue ( ) 的对象过程当中,首先执行了init(init是vue组件里面默认去执行的),在init的过程当中首先调用了beforeCreate,然后在injections(注射)和reactivity(反应性)的时候,它会再去调用created。所以在init的时候,事件已经调用了,我们在beforeCreate的时候千万不要去修改data里面赋值的数据,最早也要放在created里面去做(添加一些行为)。

当created完成之后,它会去判断instance(实例)里面是否含有“el”option(选项),如果没有的话,它会调用vm.$mount(el)这个方法,然后执行下一步;如果有的话,直接执行下一步。紧接着会判断是否含有“template”这个选项,如果有的话,它会把template解析成一个render function ,这是一个template编译的过程,结果是解析成了render函数:

render (h) {  return h('div', {}, this.text)}

解释一下,render函数里面的传参h就是Vue里面的createElement方法,return返回一个createElement方法,其中要传3个参数,第一个参数就是创建的div标签;第二个参数传了一个对象,对象里面可以是我们组件上面的props,或者是事件之类的东西;第三个参数就是div标签里面的内容,这里我们指向了data里面的text。

使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在beforeMount和mounted之间的,这也从侧面说明了,在beforeMount的时候,$el还只是我们在HTML里面写的节点,然后到mounted的时候,它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。

在使用.vue文件开发的过程当中,我们在里面写了template模板,在经过了vue-loader的处理之后,就变成了render function,最终放到了vue-loader解析过的文件里面。这样做有什么好处呢?原因是由于在解析template变成render function的过程,是一个非常耗时的过程,vue-loader帮我们处理了这些内容之后,当我们在页面上执行vue代码的时候,效率会变得更高。

beforeMount在有了render function的时候才会执行,当执行完render function之后,就会调用mounted这个钩子,在mounted挂载完毕之后,这个实例就算是走完流程了。

后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化,会调用beforeUpdate,然后经过Virtual DOM,最后updated更新完毕。当组件被销毁的时候,它会调用beforeDestory,以及destoryed。

这就是vue实例从新建到销毁的一个完整流程,以及在这个过程中它会触发哪些生命周期的钩子函数。那说到这儿,可能很多童鞋会问,钩子函数是什么意思?

钩子函数,其实和回调是一个概念,当系统执行到某处时,检查是否有hook,有则回调。说的更直白一点,每个组件都有属性,方法和事件。所有的生命周期都归于事件,在某个时刻自动执行。

其实,当你跟面试官阐述到这儿的时候,面试官基本上已经满意你的回答了,隐约看到了你的技术功底。当然,如果你还想更进一步,让面试官对你刮目相看,达到加分的效果,你还可以这样说:

在这个过程当中,Vue为我们提供了renderError方法,这个方法只有在开发的时候它才会被调用,在正式打包上线的过程当中,它是不会被调用的。它主要是帮助我们调试render里面的一些错误。

renderError (h, err) {  return h('div', {}, err.stack)}

有且只有当render方法里面报错了,才会执行renderError方法。

转载于:https://www.cnblogs.com/l-y-z/p/8830744.html

你可能感兴趣的文章
WPF Bitmap转Imagesource
查看>>
Java compiler level does not match the version of the installed Java project facet.解决方法
查看>>
笔记_小结
查看>>
Linux lsof命令 umount U盘
查看>>
自定义Font
查看>>
Matlab绘制透明平面(二元函数)
查看>>
基于二部图的推荐
查看>>
POJ 1543
查看>>
linux svn 服务端搭建
查看>>
maven用途、核心概念、用法、常用参数和命令、扩展
查看>>
linux时间同步ntp服务的安装与配置
查看>>
django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法...
查看>>
网络编程-socket并发-粘包问题
查看>>
Mitmproxy(Mitmdump) 二次代理使用方式启动python
查看>>
JSP 技术(二)--详解
查看>>
第二冲刺阶段——站立会议第十四天6月7日
查看>>
HDUOJ----Super Jumping! Jumping! Jumping!
查看>>
CronTrigger
查看>>
Laravel 5 - 文件上传
查看>>
基于jquery的可拖动div
查看>>