v-if和v-for可以一起使用吗?哪个优先级比较高?有什么影响?

Posted 奥特曼 

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-if和v-for可以一起使用吗?哪个优先级比较高?有什么影响?相关的知识,希望对你有一定的参考价值。

v-for和v-if是可以一起使用的,vue官网:当同时使用时,v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令。

官网例子:

<!--
 这会抛出一个错误,因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
   todo.name 
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读):

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
     todo.name 
  </li>
</template>

白话来说 先执行v-for 进行创建了多个dom元素,这时再去使用v-if 销毁了很多无用创建出来的的元素,非常浪费性能。

举个例子

  <ul>
      <li v-for="item in list" v-if="item % 2 ==0">  item  </li>
  </ul>


 data () 
    return 
      list: [1, 2, 3, 4, 5, 6]
    
  

 在上面例子中 123456渲染成每个li 标签 在使用v-if 把不满足条件的给销毁掉,如果在这之前把数据过滤出来是不是就解决啦?

解决方案 计算属性(computed)

 <ul>
      <li v-for="item in newList" >  item  </li>
 </ul>


 data () 
    return 
      list: [1, 2, 3, 4, 5, 6]
    
  ,
  computed: 
    newList () 
      return this.list.filter(item => item % 2 === 0)
    
  

既然计算属性可以解决,那什么时候使用官网中提到的template呢?

再来看这个例子

  <ul>
      <li v-for="item in newList"  v-if="flag">  item  </li>
  </ul>

 data () 
    return 
      list: [1, 2, 3, 4, 5, 6],
      flag: false // 判断是否隐藏
    
  ,

当flag为false就隐藏 所有li ,这时候就可以加一层template 进行使用v-if 当然给ul也是一样的。

 <ul  v-if="flag">
      <li v-for="item in newList" >  item  </li>
 </ul>
<ul>
    <template  v-if="flag">
       <li v-for="item in newList" >  item  </li>
    </template>
</ul>

 总结:v-for和v-if可以同时使用,但不建议直接使用,如果想要使用有两种解决方案 

 一、在判断条件中不对循环数据作为v-if 的判断条件的时候可以加一层 template

 二、如果要对循环数据作为v-if 的判断条件 可以提前把数据过滤出来 避免出现循环创建DOM元素后 销毁无用的DOM元素

强调:v-for和v-if同时使用时 v-for优先级大于v-if

以上是关于v-if和v-for可以一起使用吗?哪个优先级比较高?有什么影响?的主要内容,如果未能解决你的问题,请参考以下文章

前端常见vue面试题,被问到不会就糟了

Vue.js 从源码理解v-for和v-if的优先级的高低

Vue.js 从源码理解v-for和v-if的优先级的高低

避免v-if和v-for用在一起

v-if和v-for谁的优先级更高

vue的注意规范之v-if 与 v-for 一起使用