1m前端进击，第二篇（Vue列表组件的key）

前提

1. 咱们先来看一个需求
一个排行榜，有日榜和总榜，通过点击Tab切换列表数据，显示的数据内容及样式都是一样的，每一条数据都有个点赞按钮。

2. 根据需求，我们做一个简单的项目规划
为方便管理并优雅的实现需求，我们最好写一个组件（item）来显示每一条数据。
补充一点：因为一个项目中用到Tab的地方比较多，如果风格相似，我们可以将Tab也写成一个组件。

3. 开发阶段

我们定义一个存放数据的对象
data() {
	return {
		rankLists： {
			0： [],		// 日榜
			1： []		// 总榜
		}
	}
},
computed: {
	// 这里我们获取到了对应Tab的数据
	rankList() {
		return this.rankLists[this.index];		// 在我们点击tab的时候this.index会接收到一个number;
	}
}

我是分割线-----------------------------------------------------------------

接下来我们进行DOM渲染

1. 第一种方式，让key的值为下标index。