小程序生命周期
小程序生命周期分为 ： 页面生命周期 组件生命周期
它有四个阶段：
- 创建阶段
- 响应阶段
- 销毁阶段
- 重启阶段
生命周期： 它是指一个程序从启动到关闭这一过程中产生的一些列事件的总和.
代码语言：txt复制 /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options) //获取路由url 传递的参数
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},生命周期加载过程
- 小程序首次启动后，首次加载页面会触发 onLoad 事件
- 当页面显示的时候，会加载 onShow 事件
- 如果这个页面是首次渲染完成，会接着触发 onReady 事件
- 如果 小程序切换到后台，页面就会被隐藏的同时 会触发 onHide 事件 ，下次切换到前台时， 会再次出发 onShow 事件
- 最后，当页面会回收销毁时，会触发 onUnload 事件
小程序 生命周期事件
onLoad 事件
onLoad 事件在小程序加载完成后发生，该事件通常用于初始化小程序的数据和配置。例如，你可以在 onLoad 事件中使用 JavaScript 对象来获取用户的数据，或者将数据加载到小程序中。
onShow 事件
onShow 事件在小程序显示时发生，该事件通常用于显示小程序的界面和功能。例如，你可以在 onShow 事件中启动小程序的功能或者打开小程序的界面。
onHide 事件
o nHide 事件是小程序的一种隐藏事件，当小程序被用户隐藏或者关闭时，该事件会被触发。通常，你可以在 onHide 事件中处理小程序的隐藏逻辑，例如保存用户数据或者关闭小程序的界面等。
需要注意的是，小程序的 onHide 事件不会在用户手动关闭小程序时触发，只会在小程序被自动隐藏或者关闭时触发。
onReady 事件
onReady 事件在小程序准备好渲染时发生，该事件通常用于渲染小程序的界面和数据。例如，你可以在 onReady 事件中使用 JavaScript 对象来渲染小程序的界面和数据。
注意事项：
- 在 onReady 事件中渲染界面和数据时，请确保数据已经被正确加载和准备就绪。
- 如果小程序在准备时遇到了错误，则 onReady 事件可能不会触发，并且小程序将无法正常运行。
onUnload 事件
- onUnload 事件在小程序退出时发生，该事件可以用于清理小程序的数据和配置。例如，你可以在 onUnload 事件中删除小程序的缓存或者关闭小程序的界面。
注意事项：
- 在 onUnload 事件中删除小程序的缓存时，请确保缓存已经被正确清理。
- 如果小程序在退出时遇到了错误，则 onUnload 事件可能不会触发，并且小程序将无法正常运行。
小程序 组件生命周期
组件的的生命周期 在 lifetimes 字段内进行声明 【官方推荐，优先级高】
代码语言：txt复制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
在组件实例被从页面节点树移除时执行
代码语言：txt复制Component({
lifetimes: {
created(){
}
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
}, 生命周期 | 参数 | 描述 | 最低版本 |
|---|---|---|---|
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 |
