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' }
]
}
}
})