一文带你深入了解小程序生命周期

小程序生命周期分为 ： 页面生命周期 + 组件生命周期

它有四个阶段：

• 创建阶段
• 响应阶段
• 销毁阶段
• 重启阶段

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

  /**
   * 生命周期函数--监听页面加载
   */
  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 事件

小程序 生命周期事件

PS注意事项：

• 在 onReady 事件中渲染界面和数据时，请确保数据已经被正确加载和准备就绪。
• 如果小程序在准备时遇到了错误，则 onReady 事件可能不会触发，并且小程序将无法正常运行。
• 在 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

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

• attached

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

• detached

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

结束👏👏😊😊😊👍👍