vue生命周期理解

VUE的生命周期

关于VUE面试，最常问到的就是VUE的生命周期，也看过很多关于如何回答过这个问题的解答，自己也有所总结，就简单写写自己的看法。
首先我们先来到VUE的官网看看他是如何解释的VUE官网对生命周期描述
主要就是体现在这个图上
这里我们看到整个的VUE生命周期——从New一个VUE开始到destroyed结束为止的整个过程。引用VUE1.0的解释图解，如下：

可以看出生命周期中有8个主要的钩子函数，分别是（activated与deactivated在VUE2.0中的官方流程图中已经不在写明，所以我们通俗讲主要有8个钩子函数，因为生命周期以此分为了8个阶段）：

介绍了这么多，相信这些概念型的知识大家在此之前一定也有所了解，或者见过类似的图片，也就不再做过多介绍，更多写写面试方面上，
当面试官问我们一个问题时，我们应该有一个简短的思考——他为什么问这个问题？我觉得主要可以分为以下三种类型：
1、这是个基本不了解这方面技术的人，问你是因为懂方面的人要他问的或者是哪里找来的面试题上面写的。
2、这是个了解这方面或者有一些这方面技术水平的人，他问你的主要原因就是考察你这方面的基础知识掌握情况。
3、这是个在这方面技术相当资深的人，他问你这个问题，更多的是想通过此考察在此基础上更为细致的问题以及在实际项目过程中在这方面会遇到的一些问题。
在面对完全不懂这方面技术的人时，更多情况下面试我们的人是人事，老板之类的，他问你VUE生命周期问题类技术问题，想要的是一个简单的结果，因为你讲复杂了他听不懂也不爱听，我们可以做如下回答：
VUE的生命周期就是 Vue 实例从一开始创建到最后销毁的这么一个过程，常用到他的八个钩子函数，即创建（created）前后，挂载（Mount）前后，更新（Update）前后和销毁（Destroy）前后。
这样两句话的回答就够了，其他如果他的资料里面有要问下去的（一般来说他完全不懂的话不会问下去），他问什么答什么好了，因为他想要的是你的回答是否跟他了解的答案类似，又或者从中看看你的语言表达能力，要点在于表达流畅，能“自圆其说”。

如果是一个了解这方面技术，却又不是资深那种的，这类人大多是相关技术岗位却又不直接或极少从事这方面内容的人员，比如他是一个后端工程师，虽然平时也接触或者做前端内容，但没具体使用过VUE，他更多的是想了解你的基础水平，我们可以做如下回答：
VUE的生命周期就是 Vue 实例从一开始创建到最后销毁的这么一个过程，一个完整的生命周期，包括从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，应用过程中我们常会用到他的8个钩子函数，分别是创建前（beforecreate）、创建后（created）、挂载前（berofeMount），挂载后（mounted），更新前（beforeUpdate），更新后（updated ）和销毁前（beforeDestroy），销毁后（destroyed），我最常用到的是XXX，常用来xxx（这里可以说说自己在VUE项目中实际用到的，你的常用并不一定是所有人常用所以自己发挥，如我最常用到的是created——创建后这个钩子，在里面写一些AJAX来获取页面初始化所需的数据和函数自执行操作）。
其他的话他问什么你答什么，要点是答的点要准确，完整，最好插入一些自己以前项目的经验。

最后的，如果是一个资深的大牛问你这个问题，首先他问VUE生命周期，不仅是考察基础这么简单，他更多的是要问在这之后的扩展的内容，我们可以这么回答：
VUE的生命周期的生命周期是指从VUE实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，他的生命周期钩子函数主要有创建前（beforecreate）、创建后（created）、挂载前（berofeMount），挂载后（mounted），更新前（beforeUpdate），更新后（updated ）和销毁前（beforeDestroy），销毁后（destroyed）这8个
（先整体介绍一下，一般来说不会问你activated与deactivated的内容，如果问到你说主要有8个，那还有没有其他的这个问题可以补充：我了解的还有activated与deactivated，前者用于在使用vue-router时有时需要使用来缓存组件状态，需要我们的子组件需要在每次加载的时候进行某些操作的情形，因为这时候created钩子就不会被重复调用了，后者在keep-alive 组件被移除时使用。如果问你这个问题那一定是在他在项目过程中实际应用到过）；
(在下面的详细介绍上，需要我们有以下的知识储备，如果没有起码稍微记几个重要的点
1、beforecreate :
完成实例初始化，初始化非响应式变量
this指向创建的实例；
可以在这加个loading事件；
data computed watch methods上的方法和数据均不能访问
2、created
实例创建完成
完成数据(data props computed)的初始化 导入依赖项。
可访问data computed watch methods上的方法和数据
未挂载DOM,不能访问$el,$ref为空数组
可在这结束loading，还做一些初始化，实现函数自执行,
可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。
若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
3、berofeMount
有了el,编译了template|/outerHTML
能找到对应的template,并编译成render函数
4、mounted
完成创建vm.$el，和双向绑定，完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
即有了DOM 且完成了双向绑定 可访问DOM节点,$ref可在这发起后端请求，拿回数据，配合路由钩子做一些事情；
可对DOM 进行操作
5、beforeUpdate
数据更新之前
可在更新前访问现有的DOM,如手动移除添加的事件监听器；
6、updated :
完成虚拟DOM的重新渲染和打补丁；
组件DOM 已完成更新；
可执行依赖的dom 操作
注意：不要在此函数中操作数据，会陷入死循环的。
7、beforeDestroy：
在执行app.$destroy()之前
可做一些删除提示，如：你确认删除XX吗？
可用于销毁定时器，解绑全局时间 销毁插件对象
8、destroyed ：
当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁
这时组件已经没有了，你无法操作里面的任何东西了。
）
不要把上面的知识点完完全全说出来，但要记住几个重要的生命周期钩子作用和能结合自己以前项目中内容，如下面的回答：
我常用到的有beforecreate（在里面加loading事件），created（在里面写一些AJAX来获取页面初始化所需的数据和函数自执行操作），mounted（在里面写一些DOM操作，可在这发起后端请求，拿回数据，配合路由钩子做一些事情），updated （在数据更新后需要进行的操作）。后面他针对具体哪个方面问的时候，很多时候他会问你什么某个操作应该写在哪个生命周期钩子函数中，这里就要根据个人的水平来回答了，如果常用VUE的话自然知道写在哪个钩子中能达到预期的效果；
还有就是上面第二个图中，对于生命周期的每个过程有自己的理解并能描述（可以概况下每个过程表格中的内容），就像VUE官网上写的：
你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
简短总计，针对以上三种类型，我们的思路是不一样的：
第一种：简短简洁，通俗易懂
第二种：过程完整，结合实际
第三种：注重细节，具体全面
以上是个人的一些小经验以及对生命周期的理解概况，网上有很多具体讲生命周期各个过程代码体现的，能加深我们的理解，便于我们实际应用。因为是个人理解所以可能存在某些地方有错或者其他不明之处，还望理解包容，十分欢迎在评论中指出。