详解为什么Vue中的v-if和v-for不建议一起用

本文主要介绍了为什么v-if和v-for不建议一起用？分享给大家，具体如下：

一、作用

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

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

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

两者在用法上

<Modal v-if="isShow" />

<li v-for="item in items" :key="item.id">
  {{ item.label }}
</li>

二、优先级

v-if与v-for都是vue模板系统中的指令

在vue模板编译的时候，会将指令系统转化成可执行的render函数

示例

编写一个p标签，同时使用v-if与 v-for

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {{ item.title }}
  </p>
</div>

创建vue实例，存放isShow与items数据

const app = new Vue({
 el: "#app",
 data() {
  return {
   items: [
    { title: "foo" },
    { title: "baz" }]
  }
 },
 computed: {
  isShow() {
   return this.items && this.items.length > 0
  }
 }
})

模板指令的代码都会生成在render函数中，通过app.$options.render就能得到渲染函数

ƒ anonymous() {
 with (this) { return
  _c('div', { attrs: { "id": "app" } },
  _l((items), function (item)
  { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_l是vue的列表渲染函数，函数内部都会进行一次if判断

初步得到结论：v-for优先级是比v-if高

再将v-for与v-if置于不同标签

<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </template>
</div>

再输出下render函数

ƒ anonymous() {
 with(this){return
  _c('div',{attrs:{"id":"app"}},
  [(isShow)?[_v("\n"),
  _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

这时候我们可以看到，v-for与v-if作用在不同标签时候，是先进行判断，再进行列表的渲染

我们再在查看下vue源码

源码位置：\vue-dev\src\compiler\codegen\index.js

export function genElement (el: ASTElement, state: CodegenState): string {
 if (el.parent) {
  el.pre = el.pre || el.parent.pre
 }
 if (el.staticRoot && !el.staticProcessed) {
  return genStatic(el, state)
 } else if (el.once && !el.onceProcessed) {
  return genOnce(el, state)
 } else if (el.for && !el.forProcessed) {
  return genFor(el, state)
 } else if (el.if && !el.ifProcessed) {
  return genIf(el, state)
 } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
  return genChildren(el, state) || 'void 0'
 } else if (el.tag === 'slot') {
  return genSlot(el, state)
 } else {
  // component or element
  ...
}

在进行if判断的时候，v-for是比v-if先进行判断

最终结论：v-for优先级比v-if高

三、注意事项

永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

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

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

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

computed: {
  items: function() {
   return this.list.filter(function (item) {
    return item.isShow
   })
  }
}

参考文献

https://vue3js.cn/docs/zh\

到此这篇关于详解为什么Vue中的v-if和v-for不建议一起用的文章就介绍到这了,更多相关v-if和v-for不建议一起用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • 浅谈v-for 和 v-if 并用时筛选条件方法

    如下所示: <ul id="ul"> <li v-for="todo in todos" v-if="todo<4"> {{ todo }} </li> </ul> <script> varvm=new Vue({ el:"#ul", data:{ todos: [ 1, 2, 3, 4, 5 ] } }) </script> 说明:在处于同一节点的

  • 解决v-for中使用v-if或者v-bind:class失效的问题

    在v-for循环出来的列表中使用v-bing动态绑定class.v-show或v-if动态控制个别item 场景一般多用于多项选择 原因是在v-for循环的时候 items是动态创建,所以不会被监听并且实时动态控制class 解决方法是 vm.$set 官方文档中有介绍 我的解决方法使用了框架自带多选按钮,将样式呈现出来 但仅仅是样式呈现,在循环items的时候,给它新增属性isSelect 然后在点击选择的时候,动态设置isSelect属性 在提交的时候去循环判断该list每一项的isSele

  • vue2和vue3的v-if与v-for优先级对比学习

    Vue.js 中使用最多的两个指令就是 v-if 和 v-for ,因此我们可能会想要同时使用它们.虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用. 在 vue 3.x 中, v-if 总是优先于 v-for 生效. 对比学习 接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果: 我们有一个 todoList: const todoL

  • 对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历 比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>

  • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,如下: v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1:v-if指令 v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下: v-if="expression"

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

    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中 所以,不推荐v-if和v-for同时使用 使用推荐方式: <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> <ul v-if="shouldSh

  • 详解为什么Vue中不要用index作为key(diff算法)

    前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>

  • 详解为什么Vue中的v-if和v-for不建议一起用

    详解为什么Vue中的v-if和v-for不建议一起用

    本文主要介绍了为什么v-if和v-for不建议一起用?分享给大家,具体如下: 一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化 两者在用法上 <

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • 详解在Vue中如何使用axios跨域访问数据

    详解在Vue中如何使用axios跨域访问数据

    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过.至少我按照网上的做法,总不能成功.经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用. 一.安装axios 老规矩,要想使用axios,我们得安装它

  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

  • 详解在Vue.js编写更好的v-for循环的6种技巧

    在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. <ul> <li v-for='product in products'> {{ product.name }} </li> </ul> 但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大. 让我们开始吧. 1.始终在v-for循环中使用key 首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做

  • 详解c# PLINQ中的分区

    最近因为比较忙,好久没有写博客了,这篇主要给大家分享一下PLINQ中的分区.上一篇介绍了并行编程,这边详细介绍一下并行编程中的分区和自定义分区. 先做个假设,假设我们有一个200Mb的文本文件需要读取,怎么样才能做到最优的速度呢?对,很显然就是拆分,把文本文件拆分成很多个小文件,充分利用我们计算机中的多核cpu的优势,让每个cpu都充分的利用,达到效率的最大化.然而在PLINQ中也是,我们有一个数据源,如果想进行最大的并行化操作,那么就需要把其拆分为可以多个线程同时访问的多个部分,这就是PLIN

  • 详解在Python中使用Torchmoji将文本转换为表情符号

    很难找到关于如何使用Python使用DeepMoji的教程.我已经尝试了几次,后来又出现了几次错误,于是决定使用替代版本:torchMoji. TorchMoji是DeepMoji的pyTorch实现,可以在这里找到:https://github.com/huggingface/torchMoji 事实上,我还没有找到一个关于如何将文本转换为表情符号的教程.如果你也没找到,那么本文就是一个了. 安装 这些代码并不完全是我的写的,源代码可以在这个链接上找到. pip3 install torch=

随机推荐