v-if和v-for的优先级

Posted 理小理...

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-if和v-for的优先级相关的知识,希望对你有一定的参考价值。

v-if和v-for的优先级

在官方文档中

v-if是根据表达式的值truthiness来有条件的渲染元素,在切换元素以及它的数据绑定/组件被销毁并重建,如果元素是<template>,将提出它的内容作为条件块。


首先v-forv-if是不应该一起使用的,必要的情况下应该替换成commpouted属性,是因为:v-for在官方文档的解释中本身就比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当只需要渲染很小一部分的时候。

同时:

vue处理指令时。v-forv-if具有更高的优先级

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
     user.name 
  </li>
</ul>

经过了如下的运算:

this.users.map(function (user) 
  if (user.isActive) 
    return user.name
  
)

因此,哪怕我们只是渲染一小部分用户的元素,也是要经过每次冲渲染的时候遍历整个列表,而不论活跃用户是否发生了变化。

更改后:

users替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表

computed: 
  activeUsers: function () 
    return this.users.filter(function (user) 
      return user.isActive
    )
  

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
     user.name 
  </li>
</ul>
  • 经过过滤后的列表,只有在数据发生了变化的时候才会被运算,更加高效
  • 在渲染的时候,只渲染活跃的用户
  • 具有很高的可维护性。

同样,我们也可以通过不其他的方法来实现

错误写法:

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
     user.name 
  </li>
</ul>

修改后:

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
     user.name 
  </li>
</ul>

注意:

永远不要把 v-ifv-for 同时用在同一个元素上。

以上是关于v-if和v-for的优先级的主要内容,如果未能解决你的问题,请参考以下文章

v-if和v-for的优先级

v-if和v-for的优先级

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

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

v-if和v-for的优化

v-if和v-for的优化