---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);
}
這段代碼會出現這樣的情況：
1.頁面進入時，鼠標放在 “顯示彈窗”上 popover氣泡會出現
2.兩秒鍾之后 鼠標放在 “顯示彈窗”上 popover氣泡不再出現，而鼠標放在 “我是無辜的” a 標簽上，popover出現
原因:
1.在剛進入頁面時VNode樹只有一個 a標簽
div
a(顯示彈窗)
2.2秒之后VNode樹
div
a(我是無辜的)
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 就有動效
總之，靈活使用吧，哈哈