DIV CSS 佈局教程網

本文實例為大家解析了vue中track-by的屬性，供大家參考，具體內容如下

api：http://cn.vuejs.org/guide/list.html#track-by

示例地址：https://jsfiddle.net/stardew/f1eju0ku/5/

無track-by情況：數據修改時，無論值是否被修改，dom都被重新渲染（控制台可以看到）

加入track-by屬性：數據修改時，不變數據所在的dom不被重新渲染，已改變的數據所在dom才被重新渲染

track-by的兩種使用方法：

1. 使用數據中某唯一字段，例如_uid

<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>
// 初始數據
items: [
 { _uid: '111111', message: '111' },
 { _uid: '222222', message: '222' },
 { _uid: '333333', message: '333' },
 { _uid: '444444', message: '444' },
 { _uid: '555555', message: '555' }
]
// 修改成
modify: function () {
 this.items = [
 { _uid: '111111', message: '111' },
 { _uid: '666666', message: '222' },
 { _uid: '333333', message: '3333' },
 { _uid: '888888', message: '4444' },
 { _uid: '999999', message: '5555' }
 ]
}

渲染效果如下圖右(左邊無track-by，右邊有track-by)，_uid和message都不變的情況下，才不被重新渲染，只有第一組符合條件。

2. 使用$index，其它條件同上

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

渲染效果如下圖右，message的值第一、二條都沒改變，所以一、二都沒有重新渲染。

模板中同時使用message和_uid時，只有兩者都不變的情況下才不重新渲染，如下：

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

本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。