#key
-
預(yù)期：
number | string | symbolkey特殊 attribute 主要用做 Vue 的虛擬 DOM 算法的提示氏身，以在比對新舊節(jié)點組時辨識 VNodes纬朝。如果不使用 key，Vue 會使用一種算法來最小化元素的移動并且盡可能嘗試就地修改/復(fù)用相同類型元素璧诵。而使用 key 時稍味，它會基于 key 的順序變化重新排列元素慨菱，并且那些使用了已經(jīng)不存在的 key 的元素將會被移除/銷毀巾腕。有相同父元素的子元素必須有唯一的 key同蜻。重復(fù)的 key 會造成渲染錯誤。
最常見的用例是和
v-for一起使用：<ul> <li v-for="item in items" :key="item.id">...</li> </ul>它也可以用于強制替換元素/組件而不是重復(fù)使用它昵时。當(dāng)你遇到如下場景時它可能會很有用：
- 完整地觸發(fā)組件的生命周期鉤子
- 觸發(fā)過渡
例如：
<transition> <span :key="text">{{ text }}</span> </transition>當(dāng)
text發(fā)生改變時，<span>總是會被替換而不是被修改椒丧，因此會觸發(fā)過渡壹甥。
事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點壶熏，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯句柠，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符溯职。之前提過精盅，修飾符是由點開頭的指令后綴來表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續(xù)冒泡 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form @submit.prevent></form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理谜酒，然后才交由內(nèi)部元素進行處理 -->
<div @click.capture="doThis">...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div @click.self="doThat">...</div>
TIP
使用修飾符時叹俏，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生僻族。因此粘驰，用 @click.prevent.self 會阻止元素本身及其子元素的點擊的默認(rèn)行為，而 @click.self.prevent 只會阻止對元素自身的點擊的默認(rèn)行為述么。
<!-- 點擊事件將只會觸發(fā)一次 -->
<a @click.once="doThis"></a>
不像其它只能對原生的 DOM 事件起作用的修飾符蝌数，.once 修飾符還能被用到自定義的組件事件上。如果你還沒有閱讀關(guān)于組件的文檔度秘，現(xiàn)在大可不必?fù)?dān)心顶伞。
Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符。
<!-- 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā)剑梳， -->
<!-- 而不會等待 `onScroll` 完成唆貌， -->
<!-- 以防止其中包含 `event.preventDefault()` 的情況 -->
<div @scroll.passive="onScroll">...</div>
這個 .passive 修飾符尤其能夠提升移動端的性能。
TIP
不要把 .passive 和 .prevent 一起使用阻荒，因為 .prevent 將會被忽略挠锥，同時瀏覽器可能會向你展示一個警告。請記住侨赡，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為蓖租。
