vue v-for
當你使用 v-for 指令來渲染列表時，為每個元素提供一個唯一的 key 屬性是非常重要的。key 是用來給 Vue 一個提示，以便它能夠追蹤每個節點的身份，從而更高效地更新虛擬 DOM。
key?的作用
唯一標識：
key應該是每項數據的唯一標識符，這樣 Vue 可以區分不同的元素。通常可以使用數據項中的唯一 ID 或者數組索引（雖然不推薦）作為key。優化更新性能：當數據發生變化時，Vue 使用
key來識別哪些元素被添加、刪除或重新排序，從而最小化組件的重渲染范圍，提高性能。保持組件狀態：如果列表中的元素是動態組件或包含可輸入的表單元素（如
<input>），key可以幫助保留用戶的輸入狀態。沒有key，Vue 可能會復用元素，導致意外的狀態丟失。
基本用法
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>在這個例子中，假設 items 是一個對象數組，每個對象都有一個唯一的 id 和 name 屬性。:key="item.id" 確保了每個 <li> 元素都有一個唯一的鍵值，這有助于 Vue 更高效地管理這些元素。
注意事項
避免使用數組索引作為
key：盡管可以使用數組的索引作為key，但這是不推薦的做法，尤其是在列表順序可能會變化的情況下。因為這樣做會導致 Vue 無法準確地跟蹤元素的身份，進而可能導致不必要的重渲染或其他問題。<!-- 不推薦 --> <div v-for="(item, index) in items" :key="index">{{ item.name }} </div>確保
key的唯一性：key必須是唯一的，這意味著在一個v-for循環內部，所有的key都應該是獨一無二的。重復的key可能會導致不可預知的行為。
狀態錯誤例子:
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>Vue 2 Todo App</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><div id="app"><ul><li v-for="(todo, index) in todos" :key="index"><input type="checkbox">{{ todo.text }}<button @click="removeTodo(index)">Remove</button></li></ul><input v-model="newTodoText" placeholder="Add a new todo"><button @click="addTodo">Add Todo</button></div><script>new Vue({el: '#app',data: {todos: [{ text: 'Learn JavaScript' },{ text: 'Learn Vue' },{ text: 'Build something awesome' }],newTodoText: ''},methods: {addTodo() {this.todos.push({ text: this.newTodoText });this.newTodoText = '';},removeTodo(index) {this.todos.splice(index, 1);}}});</script>
</body></html>
?
點擊刪除第一個.對應的效果
?
?
舊的 VNode 列表 (刪除前):
key: 0?-> 對應數據?{ id: 1, ... }key: 1?-> 對應數據?{ id: 2, ... }key: 2?-> 對應數據?{ id: 3, ... }
新的 VNode 列表 (刪除后):
key: 0?-> 對應數據?{ id: 2, ... }?(注意：索引0現在對應的是原來索引1的數據)key: 1?-> 對應數據?{ id: 3, ... }?(注意：索引1現在對應的是原來索引2的數據)
vue會認為key值相同的是同一個元素,不會進行刪除,而是會用更新的狀態,去改變更改的內容.
也就是key0的節點和key1的節點有對應項.進行了更新
對應到key2的最后一項.新vnove里沒有該項.會刪除最后一項.?導致刪除的不是第一項出現了狀態的丟失
指令修飾符
?
指令修飾符（Modifiers） 是一種特殊后綴，以點符號（.）開頭，用于指出一個指令應當以特殊的方式來綁定。它們可以簡化代碼，并且使意圖更加明確。
下面是一些常用的 Vue 指令及其修飾符的詳細解釋：
1.?v-model?修飾符
.lazy: 默認情況下，v-model在每次input事件觸發后將輸入框的值與數據進行同步。使用.lazy修飾符則改為在change事件之后進行同步。<!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="message">.number: 自動將用戶的輸入值轉換為數值類型。如果輸入內容不能被轉換為數字，則返回原始的輸入值。<input v-model.number="age" type="number">.trim: 自動過濾用戶輸入的首尾空格。<input v-model.trim="msg">
2.?v-on?(或?@) 修飾符
.stop: 調用event.stopPropagation()方法，阻止事件冒泡。<div @click="doSomething"><button @click.stop="doSomethingElse">Stop Propagation</button> </div>.prevent: 調用event.preventDefault()方法，阻止默認行為。<form @submit.prevent="onSubmit"></form>.capture: 使用事件捕獲模式添加事件監聽器。<div @click.capture="doSomething">Capture!</div>.self: 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。<div @click.self="doSomething">Self Click</div>.once: 點擊事件只會觸發一次。<button @click.once="doThis">Only once</button>.passive: 告訴瀏覽器你不想阻止事件的默認行為（主要用于優化滾動性能）。例如，在處理觸摸或滾輪事件時非常有用。<div @scroll.passive="onScroll">...</div>
3.常用按鍵修飾符
.enter: 監聽 Enter 鍵。<input @keyup.enter="submit">.tab: 監聽 Tab 鍵。<input @keydown.tab="onTab">.delete: 監聽 Delete 和 Backspace 鍵。<input @keydown.delete="onDelete">.esc: 監聽 Escape 鍵。<input @keyup.esc="closeModal">.space: 監聽 Space 鍵。<input @keydown.space="onSpace">.up: 監聽 Up 鍵。<input @keydown.up="onUp">.down: 監聽 Down 鍵。<input @keydown.down="onDown">.left: 監聽 Left 鍵。<input @keydown.left="onLeft">.right: 監聽 Right 鍵。<input @keydown.right="onRight">.ctrl: 監聽 Ctrl 鍵。<input @keydown.ctrl.enter="save">.alt: 監聽 Alt 鍵。<input @keydown.alt.enter="submit">.shift: 監聽 Shift 鍵。<input @keydown.shift.enter="insertLineBreak">.meta: 監聽 Meta 鍵（在 Mac 上通常是 Command 鍵，在 Windows 上是 Windows 鍵）。<input @keydown.meta.enter="openMenu">
總結
Vue 的指令修飾符極大地增強了 Vue 指令的功能性，使得我們可以更加簡潔和直觀地處理常見的交互邏輯，如表單驗證、事件控制等。理解并正確使用這些修飾符可以使你的代碼更加清晰易懂，同時也能提高開發效率。對于特定場景下的需求，比如需要阻止事件冒泡或者確保輸入值為數字類型等，合理利用修飾符可以讓你的代碼更加健壯和易于維護。
?
)
![luoguP13511 [KOI P13511 [KOI 2025 #1] 等腰直角三角形](http://pic.xiahunao.cn/luoguP13511 [KOI P13511 [KOI 2025 #1] 等腰直角三角形)
_組件與Vue的內置關系(原型鏈))
