小程序生命周期

小程序生命周期

小程序生命周期分为 ： 页面生命周期 + 组件生命周期它有四个阶段：

• 创建阶段

• 响应阶段

• 销毁阶段

• 重启阶段

生命周期： 它是指一个程序从启动到关闭这一过程中产生的一些列事件的总和.

  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    console.log(options) //获取路由url 传递的参数   },
  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {
  },
  /**   * 生命周期函数--监听页面显示   */  onShow: function () {
  },
  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {
  },
  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {
  },

生命周期加载过程

1. 小程序首次启动后，首次加载页面会触发 onLoad 事件

2. 当页面显示的时候，会加载 onShow 事件

3. 如果这个页面是首次渲染完成，会接着触发 onReady 事件

4. 如果 小程序切换到后台，页面就会被隐藏的同时 会触发 onHide 事件 ，下次切换到前台时， 会再次出发 onShow 事件

5. 最后，当页面会回收销毁时，会触发 onUnload 事件

小程序 生命周期事件

onLoad 事件

onLoad 事件在小程序加载完成后发生，该事件通常用于初始化小程序的数据和配置。例如，你可以在 onLoad 事件中使用 JavaScript 对象来获取用户的数据，或者将数据加载到小程序中。

onShow 事件

onShow 事件在小程序显示时发生，该事件通常用于显示小程序的界面和功能。例如，你可以在 onShow 事件中启动小程序的功能或者打开小程序的界面。

onHide 事件

onHide 事件是小程序的一种隐藏事件，当小程序被用户隐藏或者关闭时，该事件会被触发。通常，你可以在 onHide 事件中处理小程序的隐藏逻辑，例如保存用户数据或者关闭小程序的界面等。需要注意的是，小程序的 onHide 事件不会在用户手动关闭小程序时触发，只会在小程序被自动隐藏或者关闭时触发。

onReady 事件

onReady 事件在小程序准备好渲染时发生，该事件通常用于渲染小程序的界面和数据。例如，你可以在 onReady 事件中使用 JavaScript 对象来渲染小程序的界面和数据。注意事项：

• 在 onReady 事件中渲染界面和数据时，请确保数据已经被正确加载和准备就绪。

• 如果小程序在准备时遇到了错误，则 onReady 事件可能不会触发，并且小程序将无法正常运行。

onUnload 事件

1. onUnload 事件在小程序退出时发生，该事件可以用于清理小程序的数据和配置。例如，你可以在 onUnload 事件中删除小程序的缓存或者关闭小程序的界面。

注意事项：

• 在 onUnload 事件中删除小程序的缓存时，请确保缓存已经被正确清理。

• 如果小程序在退出时遇到了错误，则 onUnload 事件可能不会触发，并且小程序将无法正常运行。

小程序 组件生命周期

组件的的生命周期 在 lifetimes 字段内进行声明 【官方推荐，优先级高】

Component({    properties: {        myProperty:{            type:String,            value:'',            observer: function() {}        },            },    data: {
    },    methods: {            },
  lifetimes: {    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名    created: function() {
    },    attached: function() {
    },    ready: function() {
    },    moved: function() {
    },    detached: function() {
    },  },


    //另一种写法    created: function() {
    },    attached: function() {
    },    ready: function() {
    },    moved: function() {
    },    detached: function() {
    },});

组件生命周期 有 3 个重要的生命周期

• created:::success 这个生命周期只应该用于给组件 this 添加一些自定义属性字段， 不能进行 setData 更新属性的 value:::

• attached:::success 大多数初始化工作可以在这个时机进行 ，可以理解为 mounted，例如 进行 setData 数据赋值:::

• detached

在组件实例被从页面节点树移除时执行

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