小程序组件文档说,组件和行为都具有独立的生命周期。当一个组件引用一个行为时,生命周期不会相互覆盖。当组件触发attached生命周期时,会依次触发行为的attached生命周期和组件的attached生命周期。
但是在运行demo时,发现确实引用了行为,但无法触发行为的attached函数,这是为什么?
my-behavior.js源码:
module.exports = Behavior({
behaviors: [],
properties: {
myBehaviorProperty: {
type: String,
value: '这是行为'
}
},
data: {
myBehaviorData: {}
},
attached: function () {
wx.showModal({
title: '提示',
content: '这是行为的生命周期'
})
},
methods: {
myBehaviorMethod: function () { }
}
})
组件源码:
var myBehavior = require('../../behaviors/my-behavior')
Component({
behaviors: [myBehavior],
/**
* 组件的属性列表
*/
relations: {
'./tryNew': {
type: 'child',
linked: function (target) {
// 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后
},
linkChanged: function (target) {
// 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后
},
unlinked: function (target) {
// 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后
}
}
},
properties: {
innerText: {
type:String,
// value:'',
observer: '_propertyChange'
}
},
/**
* 组件的初始数据
*/
data: {
someData:{}
},
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () {
wx.showModal({
title: '提示',
content: '这是组件的生命周期,' + '这是行为里的属性:' + this.properties.myBehaviorProperty,
})
},
moved: function () { },
detached: function () { },
/**
* 组件的方法列表
*/
methods: {
onMyButtonTap: function () {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
_myPrivateMethod: function () {
// 内部方法建议以下划线开头
this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
this.applyDataUpdates()
},
_propertyChange: function (newVal, oldVal) {
console.log("发生改变了");
},
onTap: function(){
var myEventDetail = {} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('mycustomer', myEventDetail, myEventOption)
}
},
/**
* 组件配置
*/
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
})
实际运行效果,只弹出了组件的attached相关提示框: