v-if 和 v-show 的區別

兩個重點【dom】和【生命周期】

1. v-if
   1. 惰性指令，false 不會被編譯、渲染
   2. 不會存在 DOM 中
   3. 切換開銷大，需要重新創建元素
   4. 值變化，使用 v-if 的組件生命周期執行順序
      1. true?變為?false【組件的銷毀】
         1. beforeDestroy /?beforeUnmounted
         2. destroyed /?unmounted
      2. false變為true 【執行全部生命周期函數】
         1. beforeCreate
         2. created
         3. beforeMount
         4. mounted
         5. beforeUpdate
         6. updated
         7. beforeDestroy / beforeUnmounted
         8. destroyed / unmounted
2. v-show
   1. 非惰性，會被渲染
   2. 使用 display: none 控制
   3. 切換開銷小
   4. 頻繁切換選擇 v-show
   5. 值變化，不會觸發生命周期函數

v-if 和 v-for 為什么不能同時用，同時用的優先級如何

1. v-for?的時候，建議設置key值，并且保證每個key值是獨一無二的，這便于diff算法進行優化

2. 在?Vue2?當中，v-for 的優先級更高
   1. 同時用帶來性能浪費
   2. 每次都會先循環，再進行條件判斷
   3. 可以外層使用 template 加 v-if, 內層使用 v-for
3. 在?Vue3?當中，則是 v-if 的優先級更高。
   1. 先判斷再循環
   2. 有無法取到 v-for 當中遍歷的 item 的問題，參考