Skip to content

Latest commit

 

History

History
64 lines (53 loc) · 1.36 KB

WXML.MD

File metadata and controls

64 lines (53 loc) · 1.36 KB

wxs必须在自定义组件主页面上引用,注意了,如果模板上需要 wxs, 必须在 引用该模板的页面的上引用

关于wx:key

尽量不要用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()
		});
    }
});

wx:key起到不重复创建组件的作用

假设我们的list是 [5,6] , 渲染出来的结果是
5
--------
6
--------
list变成了 [5], 那么中间, 6这个列表将会移除, 5这个列表, 不会触发任何的生命周期, 数据变更
--------
5
--------

问题在于 wx:key=index

如果 出现[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一样