Vue 生命周期选项：2.x 与 3.x 的全面解析及案例分享二

目录

Vue3.X生命周期

介绍

流程图

案例

​​​​​​​this.$nextTick

---

Vue 生命周期选项：2.x 与 3.x 的全面解析及案例分享一-CSDN博客

Vue3.X生命周期

---

介绍

        beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时无法访问到 data、computed 或 methods 等属性。

        使用场景：通常不做太多实际操作，可能用于一些早期的初始化设置。

        created：在实例创建完成后被立即调用。此时已完成数据观测、属性和方法的运算，watch/event 事件回调，但挂载阶段还没开始，$el 属性不可见。

        使用场景：适合进行数据初始化、发起异步请求获取数据等。

        beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用。

        使用场景：可以进行一些与挂载相关的准备工作，如显示加载动画。

        mounted：在挂载完成后被调用，此时组件已经被渲染到页面上，$el 已可用。

        使用场景：可以在此操作 DOM 元素，例如获取 DOM 尺寸、添加事件监听。

        beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

        使用场景：可以获取更新前的状态，用于与更新后的状态进行比较。

        updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。

        使用场景：根据更新后的状态进行相应的处理，如重新计算布局。

        beforeUnmount：在组件实例销毁之前调用。在这一步，实例仍然完全可用。

        使用场景：可以进行清理工作，如取消订阅事件、清除定时器。