vue列表渲染中key的作用_列表渲染和Vue的v-for指令

Web渲染是Web开发中最常用的实战之一。动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息。在我们使用的每个Web应用程序中，都可以看到很多内容列表被用于Web应用程序当中。

在这篇文章中，我们将收集有关于Vue中的v-for指令生生动态列表的理解，并通过一些示例来说明为什么在这样做的时候应该使用key属性。

由于我们将在开始编写代码时全面地解释一些事情，本文假设你对Vue或其他JavaScript框架有一定的了解。

案例：Twitter

我将使用 Twitter作为本文的案例。

当登录了Twitter并进入其首页时，我们会看到一个类似下图的一个效果：

在首页上，我们可以看到面页包括了你的趋势，信息列表，推荐关注等模块。在这些列表显示的内容取决于多种因素：Twitter历史，你的关注者和你喜欢的推荐等。因此，我们可以说所有这些数据都是动态的。

尽管这些数据都是动态获取的，但数据显示的方式相同的。这样就可以使用可重用的Web组件。

例如，我们可以将Tweets列表看作是单个的tweet-component组件列表。我们可以把tweet-componet看作是一个Shell，它可以接收各种数据，比如用户外、句柄、tweet和用户头像，以及其他一些片段，它们只是以一致的标记显示这些片段。

假设我们希望从服务器上获取一个大数据用于渲染一个组件列表(例如，tweet-component组件中的列表)。在Vue中，应该首先想到的是v-for指令。

v-for指令

v-for指令用于基于数据源来渲染项目列表。该指令可以在模板元素上使用，并且需要一个特定的语法：

有关于v-for更多的介绍可以点击这里进行了解。

我们来看看这个例子。首先，我们假设我们已经获得一个tweets数据的集合：

const tweets = [

{

id: 1,

name: 'James',

handle: '@jokerjames',

img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',

tweet: "If you don't succeed, dust yourself off and try again.",

likes: 10,

},

{