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 的问题，参考