先上一段官方文档
组件实例刚刚被创建好时, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。
文档说绝大多数初始化工作都在 attached 生命周期进行,但是小程序组件数据分为组件的内部数据 data: {}和从页面传递过来的 properties: {}。但是有个问题是在组件的 attached 中无法拿到使用组件的页面中setData的值。
// 页面的js
data: {
myString: '这是页面初始的数据'
},
onLoad: function (options) {
this.setData({
mySrting: '这是页面setData后的数据',
})
}
给组件传递myString
// 页面的wxml
组件接受myString
properties: {
myString: {
type: String,
value: '组件里mySrting的默认值'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
},
lifetimes: {
created: function(){
console.log(this.properties.myString, 'created')
},
// "组件里mySrting的默认值" "created"
attached: function() {
// 在组件实例进入页面节点树时执行
console.log(this.properties.myString, 'attached')
},
// "这是页面初始的数据" "attached"
ready: function(){
console.log(this.properties.myString, 'ready')
},
// "这是页面setData后的数据" "ready"
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
所以可以看出在组件里 mySrting 在created 取的是组件的默认值, attached取的是页面里 data 的初始数据,ready 取的才是页面 setData 之后的值。具体原理应该要研究下组件的生命周期函数的源码了,可能是在组件 attached 之后页面才 onLoad。反正直接在组件里使用 mySrting 就不会有这些问题,但如果想用页面 setData 后的 myString 来对组件的数据初始化,就只能放在组件的 ready 里而不能放在 attached 里、