v-for与v-if一同使用的注意事项

本文详细解析了Vue2.0和Vue3.0中v-for与v-if优先级的不同,指出两者在同一节点使用不推荐。在Vue2.0中,v-for优先级高于v-if,可能导致不必要的遍历;而在Vue3.0中,v-if优先级提高,避免了直接访问v-for内部变量的问题。建议通过计算属性或外部元素来分离v-for和v-if,以提升性能和代码可维护性。
摘要由CSDN通过智能技术生成

在vue官方文档里明确了v-for和v-if不推荐同时在一个节点使用。而原因就是它们两个的优先级不同,但是vue2.0文档和vue3.0文档里它们的优先级不一样。

vue2.0版v-for和v-if优先级

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。

//当 Vue 处理指令时,v-for 比 v-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
  }
})
//这种情况,哪怕我们只渲染出一小部分用户的元素,也得在每次重新渲染的时候遍历整个列表,
//不论活跃用户是否发生了变化。

正确做法是通过将其更换为在如下的一个计算属性上遍历:

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

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

这样做的好处:

  1. 过滤后的列表只会在 users 数组发生相关变化时才被重新运算,过滤更高效。
  2. 使用 v-for=“user in activeUsers” 之后,我们在渲染的时候只遍历活跃用户,渲染更高效。
  3. 解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。

vue3.0版v-for和v-if优先级
当它们处于同一节点,v-if 的优先级比 v-for 更高,这意味着 v-if 将没有权限访问 v-for 里的变量:

<!-- This will throw an error because property "todo" is not defined on instance. -->

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>
//可以把 v-for 移动到 <template> 标签中来修正:
<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

总结:
vue2.0和vue3.0 对两者的优先级说法不一样,但是相同点就是都不能发在同一个节点上使用这两个指令,可以根据需求使用计算属性过滤一下或者置于外层元素 (或 < template >) 上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值