<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>v-for-綁定和非綁定key的區(qū)別</title>
</head>
<body>
<div id="app">
<ul>
<!-- :key作為唯一標(biāo)識(shí)，推薦使用item
因?yàn)閕tem與后面遍歷出來(lái)的內(nèi)容對(duì)應(yīng)
由于item有可能重復(fù)，因此當(dāng)重復(fù)的時(shí)候，就會(huì)有瀏覽器報(bào)錯(cuò)
-->
<li v-for="(item,index) in arr" :key="item">{{item}}—{{index}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
//官方推薦我們?cè)谑褂胿-for的時(shí)候，給對(duì)應(yīng)的元素或者組件添加上一個(gè):key屬性
//當(dāng)某一層有很多相同的節(jié)點(diǎn)時(shí)，也就是列表節(jié)點(diǎn)時(shí)，我們希望插入一個(gè)新的節(jié)點(diǎn)
//假如數(shù)組如下arr:[‘A’,’B’,’C’,’D’,’E’]
//我們希望可以B和C之間插入一個(gè)F
//觸發(fā)的diff算法默認(rèn)執(zhí)行是：C更新為F，D更新為C，E更新為D，最后再插入E，因此十分沒(méi)有效率
//Vue推薦我們使用:key給每個(gè)節(jié)點(diǎn)做唯一性的標(biāo)識(shí)
//當(dāng)有了新的標(biāo)識(shí)之后，vue的diff算法就能夠正確的識(shí)別這個(gè)節(jié)點(diǎn)
//之后找到正確的位置插入新的節(jié)點(diǎn)
//重點(diǎn)：key的作用主要是為了高效的更新虛擬DOM
let app = new Vue({
el:’#app’,
data:{
arr:[‘A’,’B’,’C’,’D’,’E’],
},
})
</script>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
