vue的生命周期（面试所需，解决面试官的提问）

面试过程中，经常被面试官问道，了解vue的生命周期吗？简单说一下？

回答：一共十个常用的有八个，分别是beforeCreate ，created ，beforeMount，mounted ，beforeUpdate ，updated ，beforeDestroy ，destroyed...（说的确实很简单）

面试官想听到是这种答案吗，显然并不是。

vue的生命周期分为四个过程===》创建过程（beforeCreate ，created），挂载过程（beforeMount，mounted），更新过程（beforeUpdate ，updated），销毁过程（beforeDestroy ，destroyed）

 

befoCreate（创建前）	当前生命周期el与data尚未初始化还不能访问data、computed、watch、methods上的方法和数据	可以在这加个loading加载事件，在加载实例时触发
created（创建后-常用）	当前生命周期data初始化完成，可以访问到data、computed、watch、methods上的方法和数据，el初始化还没完成所以还不能访问	初始化完成时的事件写在这里，在这里结束loading加载事件，可以做前后端的交互， 例：异步请求如ajax
beforeMount（挂载前）	当前生命周期在挂载开始之前被调用	挂载元素，获取到DOM节点
mounted（挂载后）	当前生命周期el已经挂载到文档里	可以操作DOM节点
beforeUpdate（更新前-多次）	当前生命周期在数据更新的时候就会执行	更新的数据和模板还没结合，可以在当前生命周期做一个数据的最后修改
updated（更新后-多次）	当前生命周期更新的数据与模板结合完毕	可以做一个确认停止事件的确认框
beforeDestroy（销毁前-常用）	实例销毁之前调用。	当前生命周期做一些移除的操作。例：监听的移除，定时器的移除，事件的解绑
destroyed（销毁后）	当前生命周期数据与视图之间的关系将会断开。

 

实例：

 输出（）数据更新前

 

 

数据更新后（改变输入框里的值）调用beforeUpdate()与updated（）

 有图有真相，看明白官网提供的图，你就明白了。

这样回答之后，面试官觉得还行，继续提问，那么你再说一下在项目中父子组件之间的生命周期的顺序？

 

 

 

 如图所示：父子组件的生命周期中，首先走父组件的生命周期，当父组件的生命周期走完beforeMount（挂在前）这个函数时就会走子组件的生命周期，当子组件挂载完成后（执行完mounted）父组件在挂载dom节点。