木偶☜ 2022-07-25 11:49 采纳率: 0%
浏览 49

Vue中为什么v-if和v-for不建议同时使用呢?

一.作用

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名。

在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化。

二.原因

我们都知道,在Vue2中v-for得优先级是高于v-if的,如果同时使用,那么每次渲染都会先循环再进行条件判断造成性能的浪费

三.解决办法

1.如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环

<template v-if="isShow">
    <p v-for="item in items">
</template>

2.如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项

    computed: {
        items: function() {
          return this.list.filter(function (item) {
            return item.isShow
          })
        }
    }
    • 写回答

    2条回答 默认 最新

    • 前端不释卷leo 前端领域新星创作者 2022-07-25 12:08
      关注

      在Vue2中v-for得优先级是高于v-if的,如果同时使用,那么每次渲染都会先循环创建了DOM元素,再进行条件判断销毁DOM元素,造成性能的浪费。可以对数据源进行过滤之后再使用v-for渲染。

      评论 编辑记录

    报告相同问题?

    问题事件

    • 创建了问题 7月25日

    悬赏问题

    • ¥15 素材场景中光线烘焙后灯光失效
    • ¥15 请教一下各位,为什么我这个没有实现模拟点击
    • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
    • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
    • ¥20 有关区间dp的问题求解
    • ¥15 多电路系统共用电源的串扰问题
    • ¥15 slam rangenet++配置
    • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
    • ¥15 ubuntu子系统密码忘记
    • ¥15 保护模式-系统加载-段寄存器