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