2016-02-29 82 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'會將每個對象與其在陣列中的位置關聯起來。這本質上是一個獨特的屬性,所以它可以抑制重複條目的錯誤。

相關問題