簡單理解vue中track-by屬性

2019-11-20 08:39:25

字體：大中小

來源：轉載

供稿：網友

本文實例為大家解析了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>