组件生命周期函数:
1. created: 在组件实例刚刚被创建时执行,注意此时不能调用 setData。
2. attached: 在组件实例进入页面节点树时执行。
3. ready: 在组件布局完成后执行,此时可以获取节点信息。
4. moved: 在组件实例被移动到节点树另一个位置时执行。
5. detached: 在组件实例被从页面节点树移除时执行。
使用方法:
Component({
// 组件属性
properties: {
// ...
},
// 组件内部数据
data: {
// ...
},
// 组件方法
methods: {
// ...
},
// 组件生命周期函数
lifetimes: {
created: function () {
// 组件被创建时执行
console.log('Component Created');
},
attached: function () {
// 组件被 attached 时执行
console.log('Component Attached');
},
ready: function () {
// 组件布局完成时执行
console.log('Component Ready');
},
moved: function () {
// 组件被 moved 时执行
console.log('Component Moved');
},
detached: function () {
// 组件被 detached 时执行
console.log('Component Detached');
},
},
// 在组件实例进入页面节点树时执行
attached: function () {
console.log('attached from outer definition');
},
// 在组件布局完成后执行
ready: function () {
console.log('ready from outer definition');
},
});
在上述示例中,lifetimes 中定义的生命周期函数将覆盖 methods 中定义的同名函数。attached 和 ready 也可以直接在组件的根层级进行定义,与 lifetimes 中的定义是等效的。
注意事项:
1. 在生命周期函数中,可以通过 this 访问组件实例。
2. 在 created 阶段不应该调用 setData,因为此时组件实例还未进入页面节点树。
3. moved 生命周期函数在实际应用中使用较少,一般情况下可以忽略。
4. 在 detached 阶段进行一些清理工作,防止内存泄漏。
使用组件的生命周期函数,开发者可以在组件的不同阶段执行一些操作,例如初始化数据、页面布局完成后的操作等。详细的文档可以在[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html)中查阅。
转载请注明出处:http://www.zyzy.cn/article/detail/628/微信小程序