尽量不要用index, 我们假设一段代码
// index.wxml
<block wx:for="{{list}}" wx:key="index">
<time text="{{item}}"></time>
</block>
// time.js
Component({
properties: {
text: String
},
data: {
time: ''
},
async attached () {
this.setData({
time: new Date().getSeconds()
});
}
});
假设我们的list是 [5,6] , 渲染出来的结果是 |
---|
5 |
-------- |
6 |
-------- |
list变成了 [5] , 那么中间, 6这个列表将会移除, 5这个列表, 不会触发任何的生命周期, 数据变更 |
-------- |
5 |
-------- |
如果 出现[5,6] 变成[6] , wx:key=index |
---|
6 |
-------- |
我们知道,第一个index=0的组件不会被销毁, 也就是原先内容是5的组件不会被销毁 |
有人会说,明明视图也变了呀 |
|-------------|
5创建时间16 |
---|
6创建时间22 |
------------- |
变化之后 |
------------- |
6创建时间16 |
------------- |
因为时间是这个组件生命周期内部维持,5变成了6纯粹是因为props传入引发的, 不指定wx:key 效果和index一样
不指定wx:key 效果和index一样