- Vue.js 2 Web Development Projects
- Guillaume Chau
- 313字
- 2021-07-02 22:34:34
The key special attribute
When Vue is updating a list of DOM elements in a v-for loop, it tries to minimize the number of operations applied to the DOM, such as adding or removing elements. This is a very efficient way of updating the DOM in most cases and can improve the performance.
In order to do this, it reuses elements as much as it can and patches the DOM only where it is needed to have the desired result. It means repeated elements will be patched in place and won't be moved if an item is added or removed from the list. However, this also means that they won't animate if we apply transitions on them.
The following is a schema of how this works:

In this schema, we remove the third item in the list, which is c. However, the third p element will not be destroyed--it will be reused with the fourth item in the list, which is d. Actually, this is the fourth p element that is destroyed.
Fortunately, we can tell Vue how each element is identified so that it can reuse and reorder them. To do that, we will need to specify a unique identifier with the key special attribute. For example, each of our items could have a unique ID that we would use as the key:

Here, we specify keys so that Vue knows the third p element should be destroyed and the fourth p element moved.
The key special attribute works like a standard attribute, so we need to use the v-bind directive if we want to assign a dynamic value to it.
Back to our cards, we can use the unique identifier on the cards as the key:
<card v-for="card of cards" :def="card.def" :key="card.uid" @play="handlePlay(card) />
Now, if we add, move, or delete a card item in the JavaScript, it will be reflected with the right order in the DOM.
- Instant Testing with CasperJS
- C#程序設計實訓指導書
- 大學計算機基礎實驗教程
- Python機器學習實戰(zhàn)
- 名師講壇:Spring實戰(zhàn)開發(fā)(Redis+SpringDataJPA+SpringMVC+SpringSecurity)
- Visual FoxPro程序設計
- ANSYS Fluent 二次開發(fā)指南
- BeagleBone Black Cookbook
- ExtJS高級程序設計
- Selenium Testing Tools Cookbook(Second Edition)
- HTML 5與CSS 3權(quán)威指南(第3版·上冊)
- Java程序員面試筆試寶典(第2版)
- Raspberry Pi Robotic Projects(Third Edition)
- 零基礎學C語言(第4版)
- JavaScript編程精解(原書第2版)