vue-track-by

track-by 功能,如果修改数据中的_uid不变,数据也不变的话,dom不重新渲染。若无track-by,则无论数据是否改变,dom都重新渲染,可以打开firebug试试看哦。

by lu wei

HTML

<!-- track-by="_uid" 可以改为 track-by="$index" -->
<div  id="example">
	<p v-for="item in items" track-by="_uid">
		{{item.message}}
	</p>
	<input type="button" value="修改" @click="modify"/>
	<input type="button" value="还原" @click="reduct"/>
</div>

JavaScript

var example = new Vue({
  el: '#example',
  data: {
    items: [
      { _uid: '111111', message: '111' },
      { _uid: '222222', message: '222' },
			{ _uid: '333333', message: '333' },
			{ _uid: '444444', message: '444' },
			{ _uid: '555555', message: '555' }
    ]
  },
	methods: {
		modify: function () {
			this.items = [
				{ _uid: '111111', message: '111' },
				{ _uid: '666666', message: '222' },
				{ _uid: '333333', message: '3333' },
				{ _uid: '888888', message: '4444' },
				{ _uid: '999999', message: '5555' }
			]
		},
		reduct: function () {
			this.items = [
				{ _uid: '111111', message: '111' },
				{ _uid: '222222', message: '222' },
				{ _uid: '333333', message: '333' },
				{ _uid: '444444', message: '444' },
				{ _uid: '555555', message: '555' }
			]
		}
	}
})