簡單理解vue中track-by屬性
更新時間：2016年10月26日 16:08:23 作者：littledew
這篇文章主要幫助大家簡單的理解vue中track-by屬性,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家解析了vue中track-by的屬性，供大家參考，具體內(nèi)容如下
api：http://cn.vuejs.org/guide/list.html#track-by
示例地址：https://jsfiddle.net/stardew/f1eju0ku/5/
無track-by情況：數(shù)據(jù)修改時，無論值是否被修改，dom都被重新渲染（控制臺可以看到）
加入track-by屬性：數(shù)據(jù)修改時，不變數(shù)據(jù)所在的dom不被重新渲染，已改變的數(shù)據(jù)所在dom才被重新渲染
track-by的兩種使用方法：
1. 使用數(shù)據(jù)中某唯一字段，例如_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>
// 初始數(shù)據(jù)
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前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
今天就主要來講一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpack簡單的配置；用chainWebpack做高級配置；包括對loader的添加，修改；以及插件的配置，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了VUE-ElementUI 自定義Loading圖操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
element-ui 實現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼
這篇文章主要介紹了element-ui 實現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue 數(shù)據(jù)(data)賦值問題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問題的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
本篇文章主要介紹了手把手教你使用vue-cli腳手架(圖文解析)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要給大家介紹了關(guān)于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對文本進行格式化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了使用vue打包進行云服務(wù)器上傳，本文給大家介紹的非常詳細，對大家的工作或?qū)W習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03