前端面试题——详解VUE的生命周期

前端面试时，很多面试官都会问这样一道题，“学习过vue吗，了解VUE的生命周期吗”，因为vue它是现在前端用的最多的一个框架，想要找前端工作的朋友们还是有必要掌握一下vue的生命周期以及每个周期的作用。下面给大家详解一下vue的生命周期，也欢迎大家对其进行补充！

生命周期就是vue从开始创建到销毁的过程，分为四个步骤，分别是“创建”， “挂载”， “更新” 和 “销毁”。

其中这四步中的每一步又分为两小步，分别为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。

beforeCreate和created：beforeCreate和created：beforeCreate也就是new Vue的时候会初始化事件和生命周期；beforeCreate和created之间会挂载Data，绑定事件；

beforeMount和mounted：接下来会根据el挂载页面元素，如果没有设置el则生命周期结束，直到手动挂载；el挂载结束后，根据templete/outerHTML(el)渲染页面；在beforeMount前虚拟DOM已经创建完成，之后在mounted前，将vm.$el替换掉页面元素el，mounted将虚拟dom挂载到真实页面（此时页面已经全部渲染完成）；

beforeUpdate和updated：之后发生数据变化时触发beforeUpdate和update进行一些操作；

beforeDestroy和destroyed：最后主动调用销毁函数或者组件自动销毁时beforeDestroy，手动撤销监听事件，计时器等；destroyed时仅存在Dom节点，其他所有东西已自动销毁。

这就是vue的一个完整的生命周期。