轉載地址：https://blog.csdn.net/weixin_43043994/article/details/100576037
visible.sync和v-if、v-show
-
visible.sync：雙向綁定值。
初始情況下通過該值控制 dialog顯示。dialog關閉的時候，element自動設置該值為false。
當子組件執行 close 事件的時候，不僅改變了自己內部的 isShow 的值，而且還將 父組件的 visible的狀態發生了改變. -
v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。 -
v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。
visible.sync和v-if、v-show的使用場景
- 如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。但是父子組件，在子組件 close 方法中,雖然已經將 isShow 改變為 false，但是並沒有通知到 父組件，而在父組件中，控制彈出框的現實和隱藏是通過 show 。點擊子組件的關閉按鈕時，父組件的 show 沒有發生改變，這時候需要用visible.sync。
- Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。因此，想要重新渲染可以添加一個具有唯一值的 key 屬性