您的位置:首页 > 教程笔记 > 前端笔记

vue3的生命周期有哪些

2024-02-05 10:57:25 前端笔记 36

Vue 3 引入了新的生命周期钩子函数,并对一些旧的钩子函数进行了重构或删除。以下是一些 Vue 3 的生命周期钩子函数:

1、beforeCreate:在实例创建之前调用,此时还没有挂载,数据观测 (data observer) 和事件尚未初始化。

2、created:实例创建完成后调用,此时已经完成了数据观测 (data observer) 和事件初始化,但尚未挂载 DOM。

3、beforeMount:在挂载之前调用,相关的 render 函数首次被调用。可以在此时对模板进行编译和渲染。

4、mounted:实例已经挂载到 DOM 上后调用。在这个时候,所有的 el 和 ref 都已经被解析,并且 $refs 已经被填充。

5、beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。可以在此时进行状态更新或手动更改 DOM。

6、updated:数据更新完成后调用,发生在虚拟 DOM 打补丁和 DOM 更新之后。

7、beforeDestroy:实例销毁之前调用。在这个阶段,实例仍然完全可用。

8、destroyed:实例销毁后调用。调用后,所有的事件监听器和子组件都将被移除,所有的子组件的 destroyed 钩子也会被调用。

9、activated:当被激活的 keep-alive 组件重新进入时调用。

10、deactivated:当被激活的 keep-alive 组件离开时调用。

11、errorCaptured:在捕获阶段处理错误时调用。如果这个钩子没有返回值,或者返回 false,那么父组件的 errorCaptured 钩子会被继续调用;否则,该错误不会被进一步处理。

12、getDerivedStateFromProps:在每次渲染之前都会调用,用于从 props 派生出状态。这是一个静态方法,可以在组件创建之前或在组件销毁之后进行更改。

13、renderTracked 和 renderTriggered:这两个钩子是在渲染过程中触发的,前者在跟踪渲染时触发,后者在强制触发渲染时触发。

14、setup:在 Vue 3 中,组件选项 API 被 Composition API 替代。setup 函数是 Composition API 的入口点,用于组织和复用组件逻辑。它是一个新的、更强大、更灵活的方式来定义组件选项。

相关推荐

  • 以实例为基础,探索Golang中多态特性的学习方法

    以实例为基础,探索Golang中多态特性的学习方法

    通过实例学习Golang中的多态特性多态是面向对象编程中的一个重要概念,它允许我们使用统一的接口来处理不同类型的对象。在Golang中,多态是通过接口来实现的。接口定义了对象的行为,而不关心对象的具体

    综合教程 2024-01-29 10:33:10 158
  • 学会ajax的关键组件清单:必备的包

    学会ajax的关键组件清单:必备的包

    快速掌握Ajax:必须要懂的包清单,需要具体代码示例当今互联网时代,网页的交互性变得越来越重要。而Ajax技术的出现,使得网页能够实现异步数据交互,提升了用户体验。如果你是一名前端开发人员,掌握Aja

    前端笔记 2024-01-21 09:42:01 165
  • Vue框架中的实例使用闭包的案例解析

    Vue框架中的实例使用闭包的案例解析

    闭包在Vue框架中的实际应用案例在Vue框架中,闭包是一种强大的概念,它可以用来创建私有变量和方法,以及实现封装和继承等功能。在这篇文章中些具体的示例,以展示闭包在Vue框架中的实际应用

    前端笔记 2024-01-14 11:39:51 116
  • 分析和解析原型与原型链的特性及实例

    分析和解析原型与原型链的特性及实例

    原型和原型链的特性分析及实例解析在JavaScript中,原型和原型链是理解对象和继承的关键概念。对于初学者来说,这可能是一个相当抽象和难以理解的概念。本文将详细介绍原型和原型链的特性,并通过实例解析

    前端笔记 2024-01-14 11:39:12 113
  • 学习Python绘图的速成指南:绘制冰墩墩的代码实例

    学习Python绘图的速成指南:绘制冰墩墩的代码实例

    快速上手Python绘图:画出冰墩墩的代码示例Python是一种简单易学且功能强大的编程语言,通过使用Python的绘图库,我们可以轻松地实现各种绘图需求。在本篇文章中,我们将使用Python的绘图库

    综合教程 2024-01-14 11:28:39 168