小程序中自定义组件的生命周期函数

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

组件全部的生命周期函数

小程序组件可用的全部生命周期如下

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行（只是创建好，还未放置到页面中）
attached	无	在组件实例进入页面节点树时执行 （只是放入页面中，并未被渲染）
ready	无	在组件在视图层布局完成之后执行 （被渲染完成之后）
moved	无	在组件实例被移动到节点树另一个位置时执行 （组件被移动）
detached	无	在组件实例被从页面节点树移除时执行 （组件被删除）
error	object Error	每当组件方法抛出错误时执行

---

组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是 created 、attached、detached

• 组件实例刚被创建好的时候，created 生命周期函数会被触发

  • 此时还不能调用 setData
  • 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

• 在组件完全初始化完毕，进入页面节点树后，attached 生命周期函数会被触发

  • 此时，this.data 已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始化数据）

• 在组件离开页面节点树后，detached 生命周期函数会被触发

  • 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
  • 此时适合做一些清理性的工作

---

定义组件的生命周期函数

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明 （这是推荐的方式，期优先级最高）

Component({
    data: {
    
    },
    
    methods: {
    
    },
    
    lifetimes:{
        //组件进入页面节点树时执行
        attached(){
    
        },
        //组件实例被从页面节点树移除时执行
        detached(){
    
        }
    }
})