摘要：如果你只是简单罗列出这几个钩子函数的名称，不具体深入阐述的话，你这样的回答很难令面试官满意。那么接下来，闰土大叔将手摸手教你如何深入浅出地说出令面试官满意的有亮点的回答。
当面试官问：“谈谈你对vue的生命周期的理解”，听到这句话你是不是心里暗自窃喜：这也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 这几个钩子函数么，创建=>挂载=>更新=>销毁，So easy ！！！
非也非也。如果你只是简单罗列出这几个钩子函数的名称，不具体深入阐述的话，你这样的回答很难令面试官满意。如何才能以点带面深入阐述自己对vue的生命周期理解，从而让面试官对你留下好印象呢？
别急，闰土大叔来告诉你，下次再碰到这个问题，你可以直接甩给面试官下面这张Image就OK了~
当然，甩张Image给面试官这句话肯定是开玩笑的（适度幽默，缓解紧张气氛）。不过这张流程图还是有用的，因为它是我从Vue官网上拷贝下来的，只要你能理解了这张图，也就对Vue的生命周期有了一个大致的了解。那么接下来，闰土大叔将手摸手教你如何深入浅出地说出令面试官满意的、有亮点的回答。
在谈到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方法。
所以我们主动让render函数报个错：
render (h) {
throw new TypeError("render error")
}
如图所示，渲染出来的就是Error信息了。还有一点，renderError只有在本组件的render方法报错的情况下它才会被调用。
写在最后这就是关于vue的生命周期的一个详细的阐述，大家只需要记住在vue的生命周期里有哪些钩子函数，它们分别是在什么情况下会被调用，以及其中的一些原理即可。
以后如果有人问你“如何解释vue的生命周期才能令面试官满意”这个问题，你可以直接把这篇文章甩给他就OK了。
最后祝所有面试的童鞋顺利拿到OFFER！
欢迎关注我的后续文章，文章预告：
eslint的错误修复小技巧
开发时服务端渲染的配置和原理
使用koa实现node server
......
如何使用pm2以及服务器端的部署
以上内容均会第一时间发布在我的公众号：闰土大叔 ，欢迎关注。文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94226.html
摘要：记录下我遇到的面试题，都有大佬分享过，附上各个大佬的文章，总结出其中的主要思想即可。推荐黑金团队的文章前端缓存最佳实践推荐名扬的文章浅解强缓存和协商缓存状态码重点是等，要给面试官介绍清楚。前言 在这互联网的寒冬腊月时期，虽说过了金三银四，但依旧在招人不断。更偏向于招聘高级开发工程师。本人在这期间求职，去了几家创业，小厂，大厂厮杀了一番，也得到了自己满意的offer。 整理一下自己还记得的面试...
摘要：假如你通过阅读源码，掌握了对的实现原理，对生态系统有了充分的认识，那你会在面试环节游刃有余，达到晋级阿里的技术功底，从而提高个人竞争力，面试加分更容易拿。 前言 一年一度紧张刺激的高考开始了，与此同时，我也没闲着，奔走在各大公司的前端面试环节，不断积累着经验，一路升级打怪。 最近两年，太原作为一个准二线城市，各大互联网公司的技术栈也在升级换代，假如你在太原面试前端岗位，而你的技术库里若...
摘要：可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。我工作中只用到，对和不怎么熟与的区别相同点都支持指令内置指令和自定义指令都支持过滤器内置过滤器和自定义过滤器都支持双向数据绑定都不支持低端浏览器。 看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是...
摘要：技术一面一面主要考察基础，有些会有技术笔试，比如腾讯，。腾讯的面试官就很喜欢问，安全，浏览器缓存方面的问题，计算机基础，但是要懂为什么。 这篇文章简单总结下2018年内我的一些前端面试经历， 在这简单分享一下，希望对大家有所启发。 楼主在深圳，毕业两年。面的主要是深圳的几家公司。 包括: 腾讯， 蚂蚁金服， Lazada， Shopee, 有赞 等 。 楼主在准备面试前， 想着复习一...
摘要：经历月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。现在是面试了家公司左右，有些高频问题会标记次数总次数，可供大家参考。最后祝大家面试顺利，拿到心仪的，写错的地方请不吝赐教，谢谢。 经历 7月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。一开始广泛看面试题，没抓住重点复习，有很多平时也没怎么用到，导致一开始面试的时候，问的问题...
阅读 2995·2021-10-13 09:39
阅读 1860·2021-09-27 13:36
阅读 2873·2021-09-22 16:02
阅读 2430·2021-09-10 10:51
阅读 1471·2019-08-29 17:15
阅读 1441·2019-08-29 16:14
阅读 3227·2019-08-26 11:55
阅读 2429·2019-08-26 11:50
