使用v-for更新已渲染的元素列表時,預設用就地復用策略;列表資料修改的時候,他會根據key值去判斷某個值是否修改,如果修改,則重新渲染這一項,否則復用之前的元素;
const list =[,
,,]
for=
"(item, index) in list"
:key=
"index"
>
}<
/div>
**
const list =[,
,,,]
const list =[,
,,]
之前的資料 之後的資料
key:
0 index:
0 name: test1 key:
0 index:
0 name: test1
key:
1 index:
1 name: test2 key:
1 index:
1 name: 我是插隊的那條資料
key:
2 index:
2 name: test3 key:
2 index:
2 name: test2
key:
3 index:
3 name: test3
是不是很驚奇,我明明只是插入了一條資料,怎麼三條資料都要重新渲染?而我想要的只是新增的那一條資料新渲染出來就行了
最好的辦法是使用陣列中不會變化的那一項作為key值,對應到專案中,即每條資料都有乙個唯一的id,來標識這條資料的唯一性;使用id作為key值,我們再來對比一下向中間插入一條資料,此時會怎麼去渲染
之前的資料 之後的資料
key:
1 id:
1 index:
0 name: test1 key:
1 id:
1 index:
0 name: test1
key:
2 id:
2 index:
1 name: test2 key:
4 id:
4 index:
1 name: 我是插隊的那條資料
key:
3 id:
3 index:
2 name: test3 key:
2 id:
2 index:
2 name: test2
key:
3 id:
3 index:
3 name: test3
總結：所以一句話，key的作用主要是為了高效的更新虛擬dom。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。
為什麼應該在 v for 中使用 key？
引用 vue 官方文件的原話 vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這樣容易導致一些問題。因為類似 這樣的元素都有乙個internal state 儲存著元素的值，而在元素復用時，這個值是會得到保留的。我們來看乙個登陸方式切換的例子 v if isuser login...
青年工薪族為什麼必須要建立投資理財觀念
本文內容整理自我在鴻學金信贏在青年 工薪青年投資理財培訓中所上的一節課內容，希望能給廣大的工薪青年白領們在規劃自己的人生財富時提供一定的參考意見！前面已經給大家講的利息，複利等概念，也列舉了很多案例，最後給大家展示了巴菲特的投資收益，也讓大家明白了一但複利威力發揮出來，今天的一點點投入，將會在未來發...
為什麼使用spinlock的時候不能睡眠
跟蹤一下spin lock mr lock 的實現 define spin lock lock spin lock lock define spin lock lock lock lock define lock lock do while 0 注意到 preempt disable 這個呼叫的功能...