v-if和v-for的区别 v-if和v-show的区别

v-if和v-for的区别

①v-for的优先级高于v-if

②v-for可以取到每一项的index

v-for和v-if不应该一起使用。

原因：v-for比v-if的优先高，即每一次都需要遍历整个数组，影响速度。vue2.x 中 v-for 优先级高于 v-if ，vue3.x 相反；

例如：

<div
  v-for="(fileMsg,index) in fileMsgList"
  :key="fileMsg.id"
  v-if="index < 2"
>
  <sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>

因为优先级v-for高，所以其实进行v-if判断的时候，v-for已经执行完了，浪费资源

解决方法1：换成v-show

解决方法2：用计算属性

computed: {
  fileMsgListCom() {
    return this.fileMsgList.filter((item, index) => {
      return item < 2;
    });
  }
} 

<div                                                                  
  class="file_name"                                     
  v-for="(fileMsg,index) in fileMsgListCom"             
  :key="fileMsg.id"                                          
>                                                       
  <sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div> 

v-if和v-show的区别

①v-if有较高的切换性能消耗

②v-show有较高的初始渲染消耗

③v-if在条件不满足的时候直接从dom元素消失，v-show行间样式变成display:none，dom元素还在

如果元素需要频繁切换，最好不要用v-if,推荐使用v-show;

如果元素可能永远不会被显示出来，推荐使用v-if