---template部分
div
el-popover(ref="message", placement="top-start", title="標題", width="100", trigger="hover",content="這是一段內容,這是一段內容,這是一段內容,這是一段內容。"
a(href="javascript:void(0)", v-if="show", style="margin-right:10px") 我是無辜的
a(href="javascript:void(0)", v-popover:message="", style="margin-right:10px") 顯示彈窗
a(href="javascript:void(0)", v-if="show", style="margin-right:10px") 我是無辜的2
---js部分
mounted () {
setTimeout(() => {
this.show = true;
}, 2000);
}
這段代碼會出現這樣的狀況：javascript
1.頁面進入時，鼠標放在 「顯示彈窗」上 popover氣泡會出現vue
2.兩秒鐘以後 鼠標放在 「顯示彈窗」上 popover氣泡再也不出現，而鼠標放在 「我是無辜的」 a 標籤上，popover出現java
緣由:node
1.在剛進入頁面時VNode樹只有一個 a標籤算法
divapi
a(顯示彈窗)dom
2.2秒以後VNode樹this
divspa
a(我是無辜的)code
a(顯示彈窗)
a(我是無辜的2)
Vue 在2秒後，生成了新的Vnode樹，這時Vue 將對比這兩棵樹，以此來修改dom
Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法
上面那個例子，正是因爲 第一棵樹的 a(顯示彈窗) 這個node 被複用致使的
由於他們是相同類型元素，複用了這個元素後， 會把 a(我是無辜的) 節點相應的靜態屬性 從新賦值給 a(顯示彈窗) 元素，包括 文本內容，class名等。
這基本上讓你們看不到被複用的痕跡，就好像是新建立了 a(我是無辜的) node 同樣
其實，a(我是無辜的) 本體就是 a(顯示彈窗) 元素。 這樣，在2秒以後，鼠標放在 a(我是無辜的) node 上，顯示出popover，的現象就能夠解釋了
特性
key
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。
若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。
使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。
Vue 在進行 v-for 靜態編譯時, 若是發現沒有指定 :key ，或者 重複的key 會給出 警告提示。
上面的例子，能夠當作 是 手動寫的v-for 至關於 a(v-for=(item in [1,2,3])) 。
爲了不上例子的狀況 能夠給 a標籤上 加上 :key 來避免。
可是，也必需要根據場景靈活使用，
有時加上key 也能夠會引發 觸發過渡：
<transition>
<span :key="text">{{ text }}</span>
</transition>
只要一改變 text 就有動效
總之，靈活使用吧，哈哈