春招冲刺（七）：Vue生命周期

生命周期面试题总结

Q1：vue生命周期是什么？

Vue 实例从创建到销毁的过程为生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，称之为 Vue 的生命周期。

Q2：vue生命周期总共有几个阶段？

总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

Q3：第一次页面加载会触发哪几个钩子？

会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

Q4：DOM 渲染在哪个周期中就已经完成？

DOM 渲染在 mounted中就已经完成了。

Q5：简述每个生命周期 具体适合哪些场景？

• beforeCreate
  • 在实例初始化之后，但又未完全创建之前,执行它时，data和methods中的数据都还未初始化
  • 使用场景:可以在此时加一些loading效果，在created时进行移除
• created
  • 实例创建完成后被立即调用,此阶段完成了数据的观测,property 和方法的运算，watch/event 事件回调,但$el还没有被挂载到页面中。
  • 使用场景: 一般可以在此时发送一些网络请求，获取数据（发起一些异步请求）
• beforeMounted
  • 模板在内存中已经编译好了，但是并没有渲染到页面中。页面显示的还仅仅是模板字符串,此时DOM为虚拟DOM,还是无法操作的
• mounted
  • el挂载到实例上后调用,DOM 加载完成,页面渲染完毕
  • 使用场景：写业务逻辑
• beforeUpdate
  • 执行它时，data中的数据已经被更新了，但是页面中的data还未被替换过
  • 使用场景:适合在更新之前访问现有的 DOM
• updated
  • 数据更新完成,且页面发生改变
• beforeDestroy
  • 实例销毁之前调用，实例仍然完全可用。
  • 使用场景: 主要解绑一些使用addEventListener监听的事件等
• destroyed
  • 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

Q6：父子组件的生命周期

• 执行顺序
  • 加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  • 子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  • 父组件更新过程：父 beforeUpdate -> 父 updated
  • 销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

参考链接

• https://www.jianshu.com/p/4f8daeafe58f
• https://blog.csdn.net/weixin_45788691/article/details/107010193
• https://blog.csdn.net/m0_53895172/article/details/120194883
• https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091937&idx=1&sn=1d08ebe716e00555e18aa34896ffa7a7&chksm=be5bc8cc892c41daaefa76d5747d5e1eccd2934c3c178e70e16702d729aa2e40409621ffa137&scene=27