介绍微信小程序中页面的生命周期函数和组件的生命周期函数

1.1 页面生命周期函数

这些函数主要用于管理页面的显示和隐藏。

• onLoad(options):

  • 页面加载时触发，options 是页面路由参数，可以在这里初始化数据。每当用户进入该页面时都会调用这个函数。

• onShow():

  • 页面显示时触发。每当页面从后台切换到前台时都会调用这个函数。在这个函数中可以进行一些数据的更新。

• onReady():

  • 页面初次渲染完成时触发。此时用户界面渲染完成，可以用于初始化一些组件或数据。

• onHide():

  • 页面隐藏时触发。此时可以停止一些不必要的操作，例如定时器，或者保存一些状态。

• onUnload():

  • 页面卸载时触发。这个函数在页面被关闭或者跳转时调用，适合进行清理工作，如注销网络请求或清除定时器等。

Page({
  data: {
    message: 'Hello WeChat!',
  },
  
  onLoad(options) {
    console.log('页面加载:', options);
  },

  onShow() {
    console.log('页面显示');
  },

  onReady() {
    console.log('页面初次渲染完成');
  },

  onHide() {
    console.log('页面隐藏');
  },

  onUnload() {
    console.log('页面卸载');
  }
});

 2. 组件生命周期函数

微信小程序的组件也有自己的生命周期函数，主要包括以下这些：
2.1 组件生命周期函数
•
`created()`：
•
组件实例被创建时触发，可以用于初始化数据，但此时尚未渲染。
•
`attached()`：
•
组件被添加到页面节点树时触发，适合进行一些需要 DOM 元素的操作。
•
`ready()`：
•
组件准备完成时触发，此时可以进行一些需要 DOM 元素的操作，比如操作节点或进行一些初始设置。
•
`moved()`：
•
组件实例被移动到节点树的位置时触发。
•
`detached()`：
•
组件从页面节点树中被移除时触发，适合进行一些清理操作。

Component({
  properties: {
    title: {
      type: String,
      value: '默认标题',
    },
  },

  created() {
    console.log('组件被创建');
  },

  attached() {
    console.log('组件被添加');
  },

  ready() {
    console.log('组件准备完成');
  },

  moved() {
    console.log('组件移动');
  },

  detached() {
    console.log('组件被移除');
  },
});