如何解释vue的生命周期才能令面试官满意？

当面试官问：“谈谈你对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以及服务器端的部署

以上内容均会第一时间发布在个人公众号：闰土大叔 ，欢迎关注。