学习Vue（3）列表渲染和数组更新检测

在游戏当中涉及到了列表，需要左右各两个列表展示用户的信息，界面如图：

首先在data里面定义两个数组列表

data() {
	return {
		...,
		leftUsers: [],
		rightUsers: []
	}
}

然后再onLoad（）里面通过房间id获取当前房间的用户列表,并调用updateUser()跟新数据，这里使用假数据测试

var users = [{
	id: "123",
	imageUrl: ".../15895259872481860697124.png",
	sort: 2
	}, {
	id: "456",
	imageUrl: "...15895259872481860697124.png",
	sort: 8
	}]；
this.updateUser(users);



updateUser(users) { //整理用户信息
	var leftMap = users.filter((user) => user.sort <= 6);
	var rightMap = users.filter((user) => user.sort > 6);
	for (var i = 0; i < 6; i++) {
		var isEmpty = true;
		for (var j = 0; j < leftMap.length; j++) {
			var user = leftMap[j];
			if (user.sort === i + 1) {
				this.leftUsers.splice(i, 1, user)
				// this.leftUsers[i] = user;
				isEmpty = false;
				break;
				}
		}
		if (isEmpty && !this.leftUsers[i]) {
			this.leftUsers.splice(i, 1, {
				id: i + 1,
				imageUrl: this.defaultImage,
				sort: 0
			});
		}
	}
	for (var i = 0; i < 6; i++) {
		var isEmpty = true;
		for (var j = 0; j < rightMap.length; j++) {
			var user = rightMap[j];
			if (user.sort === i + 7) {
				this.rightUsers.splice(i, 1, user)
				isEmpty = false;
				break;
				}
			}
			if (isEmpty && !this.rightUsers[i]) {
				this.rightUsers.splice(i, 1, {
					id: i + 1,
					imageUrl: this.defaultImage,
					sort: 0
				});
			}
	}
}

在更新用户列表的时候使用的是this.leftUsers[i] = user;，这样虽然改变了列表的数据，但是页面没有刷新，Vue提供了多种数组变更监听的方法，详细的内容可前往https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B查看