前端面试题(四):Vue2的生命周期

Vue 2 中的生命周期分为多个阶段,每个阶段都有相应的生命周期钩子(Hooks)来处理组件在不同阶段的逻辑。以下是 Vue 2 的各个生命周期钩子函数及其触发时机:

1. 创建阶段 (Creation)

  • beforeCreate:

    • 这个钩子在 Vue 实例被初始化之后、数据观测和事件/侦听器设置之前调用。
    • 不能访问 datacomputedmethods 等数据和事件。
  • created:

    • 在实例创建完成后立即调用。此时,数据已观测,事件已设置,但 DOM 还未挂载。
    • 可以访问 datacomputedmethods 等属性。

2. 挂载阶段 (Mounting)

  • beforeMount:

    • 在挂载开始之前调用,相关的 render 函数首次被调用。
    • 可以在这个阶段做一些初始化的操作,但还无法访问到实际的 DOM。
  • mounted:

    • 在 DOM 挂载完成后调用。此时,所有的模板、组件已经插入到 DOM 中。
    • 可以在这个钩子中访问和操作真实的 DOM 元素,进行一些依赖于 DOM 的操作。

3. 更新阶段 (Updating)

  • beforeUpdate:

    • 在数据更新时调用,数据变动后,虚拟 DOM 会重新渲染和打补丁前执行此钩子。
    • 可以在这个钩子中进行某些操作,但你不能改变数据(避免无限循环)。
  • updated:

    • 数据更新后,虚拟 DOM 被重新渲染并打补丁后调用。此时,视图已更新。
    • 可以在这个钩子中访问和操作更新后的 DOM,但此时不会再次触发渲染。

4. 销毁阶段 (Destruction)

  • beforeDestroy:

    • 在组件销毁之前调用。此时,实例仍然是有效的,可以进行清理工作,如取消定时器、注销事件监听等。
  • destroyed:

    • 组件销毁后调用。此时,Vue 实例已经完全销毁,数据、事件监听、子组件等都已经被清除,无法再进行任何操作。

5. 错误处理钩子 (Error Handling)

  • errorCaptured :
    • 捕获来自子组件的错误,并阻止错误进一步传播。这个钩子只会在错误发生在子组件时被触发。

总结

生命周期钩子 调用时机
beforeCreate 实例初始化之后,数据观测和事件/侦听器设置之前。
created 实例创建完成,数据已观测,事件已设置,但 DOM 尚未挂载。
beforeMount 挂载开始之前,render 函数首次被调用。
mounted DOM 挂载完成后,实例和 DOM 关联完毕,可以访问到真实 DOM。
beforeUpdate 数据变化前,虚拟 DOM 更新前。
updated 数据变化后,虚拟 DOM 更新完成,视图已更新。
beforeDestroy 组件销毁之前,清理工作。
destroyed 组件销毁之后,实例和数据已销毁。
errorCaptured 捕获并处理子组件的错误。

这些生命周期钩子函数为开发者提供了丰富的操作时机,可以根据需求进行相应的逻辑处理。

相关推荐
伍哥的传说35 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783837 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为