vue.js - 将 track-by 属性与 v-for 一起使用有什么意义？

Question

我是 vuejs 的新手。在我看来，track-by 属性有点难以理解。以下示例显示 track-by 属性与数组中的重复元素有关。但是 v-for 属性是如何实现的呢？当数组中有重复元素时会出现什么行为？track-by="$index" 如何产生影响？

new Vue({

	el: '#app',
  
  data: function() {
  	return {
    	items: [
      	'User Connected',
        'Message',
        'Message',
        'User Connected',
        'Message'
      ]
    }
  },
  
  methods: {
  	addItem: function(item) {
			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/

Answer 1

为了 react 迅速，Vue 尽可能重用 DOM 元素。因此，如果它已经为特定项目渲染了 DOM，它将保存它以供需要再次渲染的任何时候使用。如果从数组中删除某些内容，然后重新添加，使用现有 HTML 会更快。

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