首页 > 其他分享 >组件生命周期

组件生命周期

时间:2024-12-24 09:31:17浏览次数:3  
标签:生命周期 实例 组件 执行 节点 页面

组件生命周期

组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中,最重要的生命周期是 created attached detached ,包含一个组件实例生命流程的最主要时间点。

  • 组件实例刚刚被创建好时, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data此时还不能调用 setData 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
  • 在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
  • 在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。

定义生命周期方法

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)。

代码示例

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

在 behaviors 中也可以编写生命周期方法,同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意,如果一个组件多次直接或间接引用同一个 behavior ,这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。

可用的全部生命周期如下表所示。

生命周期 参数 描述 最低版本
created 在组件实例刚刚被创建时执行 1.6.3
attached 在组件实例进入页面节点树时执行 1.6.3
ready 在组件在视图层布局完成后执行 1.6.3
moved 在组件实例被移动到节点树另一个位置时执行 1.6.3
detached 在组件实例被从页面节点树移除时执行 1.6.3
error Object Error 每当组件方法抛出错误时执行 2.4.1

组件所在页面的生命周期

还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义。其中可用的生命周期包括:

生命周期 参数 描述 最低版本
show 组件所在的页面被展示时执行 2.2.3
hide 组件所在的页面被隐藏时执行 2.2.3
resize Object Size 组件所在的页面尺寸变化时执行 2.4.0
routeDone 组件所在页面路由动画完成时执行 2.31.2

注意:自定义 tabBar 的 pageLifetime 不会触发。

代码示例

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

标签:生命周期,实例,组件,执行,节点,页面
From: https://www.cnblogs.com/AtlasLapetos/p/18623880

相关文章

  • 华为仓颉鸿蒙Next原生UI基础组件Search
    提供搜索框组件,用于提供用户搜索内容的输入区域。子组件无构造函数init(String,String,Option,Option)publicinit(value!:String="",placeholder!:String="",icon!:Option<CJResource>=Option.None,controller!:Option<SearchController>=Option.......
  • 全解!!!!vue/和react组件
    简介Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。今天我们通过对比的方式来学习Vue和React的组件传值这一部分。本文首先讲述Vue2、Vue3、React的组件传值方式,然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结......
  • Vue3——生命周期
    生命周期分为四个阶段:创建、挂载、更新、销毁(卸载)Vue2:创建阶段:beforeCreate、created挂载阶段:beforeMount、mounted更新阶段:beforeUpdate、updated销毁阶段:beforeDestroy、destroyedvue3:创建阶段:setup挂载阶段:onBeforeMount、onMounted......
  • Bean生命周期配置
    Bean生命周期配置init-method:指定类中的初始化方法名称destroy-method:指定类中销毁方法名称Bean实例化三种方式1)使用无参构造方法实例化​它会根据默认无参构造方法来创建类对象,如果bean中没有默认无参构造函数,将会创建失败<beanid="userDao"class="com.itheima.d......
  • Vue.js组件通信深度解析:构建高效、灵活的数据流
    Vue.js组件通信深度解析:构建高效、灵活的数据流引言在现代Web开发中,组件化是实现高效、可维护和可扩展代码的关键。Vue.js作为一款流行的前端框架,提供了强大的组件系统,使得开发者可以轻松地创建、注册和管理组件。然而,组件之间的通信是构建复杂应用时不可避免的问题。本文......
  • Vue3封装一个Element的自定义上传组件
    封装一个ElementPlus的自定义上传组件写在前面,工作中要封装一个文件上传组件,想着以后肯定也能用得到,就给记录了下来文章通篇借鉴的是这位大佬的,有需要的可以去看看https://blog.51cto.com/u_15295608/3527047直接上代码:先看样式:就是这样子了!!!,这是个弹窗的形式,有空我再整......
  • Vue.js组件开发-路由与视图切换
    在Vue.js中,路由与视图切换是通过VueRouter来实现。VueRouter提供了声明式的路由配置、嵌套路由、动态路由匹配、路由参数、路由守卫等功能。基本概念‌路由‌:定义URL路径和组件之间的映射关系。‌视图‌:与特定路由相关联的组件,当用户访问某个路由时,对应的视图组件会被渲......
  • 我在使用Rust编程时,只在编译期提示要手动标注生命周期时才进行标注,这样可以吗?
    在使用Rust编程时,只在编译器提示需要标注生命周期时才进行标注是一种可以接受的初学者实践,但随着经验积累和代码复杂度增加,这种方式可能会有以下问题和限制:1.优点:简单、快速入门编译器友好:Rust的借用检查器非常强大,大部分情况下会推断出正确的生命周期,尤其是在简单的函数......
  • 鸿蒙开发实战:揭秘页面与项目生命周期,实现精准监控
    前言在鸿蒙应用开发中,每一个页面和组件都承载着特定的生命周期。这些生命周期阶段,如同生命的轨迹,记录着页面从诞生到消亡的每一个重要时刻。深入理解和监控这些生命周期,不仅能提升应用性能,还能帮助我们更好地把握用户体验。1.鸿蒙@Component组件生命周期详解在鸿蒙的ArkTS框架......
  • MCP(Model Context Protocol)模型上下文协议 进阶篇1 - 组件和功能
    前言在准备实战篇2的代码部分时,我意识到之前的架构篇虽然对MCP的整体设计进行了介绍,但关于具体的消息交互细节描述得还不够详细。然而,在实际开发中,消息交互的细节往往是最关键的部分。因此,我决定再开一篇新的进阶篇,作为理论篇向实战篇的过渡,详细说明开发过程中会实际用到的具......