2016-02-29 32 views
3

我是vuejs的新手。在我看来,追踪属性有点难以理解。以下示例显示了track-by属性与数组中的重复元素有关。但是,如何在引擎盖下实现v-for属性?当数组中有重复的元素时,行为如何?track-by =“$ index”有什么不同?与v-for一起使用track-by属性有什么意义?

new Vue({ 
 

 
\t el: '#app', 
 
    
 
    data: function() { 
 
    \t return { 
 
    \t items: [ 
 
     \t 'User Connected', 
 
     'Message', 
 
     'Message', 
 
     'User Connected', 
 
     'Message' 
 
     ] 
 
    } 
 
    }, 
 
    
 
    methods: { 
 
    \t addItem: function(item) { 
 
\t \t \t this.items.push(item); 
 
    } 
 
    } 
 

 
})
<div id="app"> 
 
    <button @click="addItem('User Connected')">Add Connected</button> 
 
    <button @click="addItem('Message')">Add Message</button> 
 

 
    <ul> 
 
    <li v-for="item in items" track-by="$index">{{ item }}</li> 
 
    </ul> 
 
    <pre> 
 
    {{items | json}} 
 
    </pre> 
 
</div>

https://jsfiddle.net/uuw4z0kr/2/

回答

4

为了反应快,Vue的重新使用DOM元素只要有可能。因此,如果它已经为特定项目呈现了DOM,它将会将其保存为在需要再次呈现的任何时候使用。如果从数组中删除了某些内容,然后重新添加,则使用现有的HTML会更快。

但是这会导致数组元素不唯一时的问题。 Vue无法区分它们。 track-by告诉Vue每个项目的哪个方面是唯一的,所以它可以知道什么时候重新使用DOM元素。如果您的数组是一系列具有id属性的对象,则可以使用track-by='id'。但是,如果对象没有唯一字段,则track-by='$index'会将每个对象与其在阵列中的位置关联起来。这本质上是一个独特的属性,所以它可以抑制重复条目的错误。

相关问题