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


Posted in Vue.js onJanuary 13, 2021

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

详解为什么Vue中的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不建议一起用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue自定义组件实现双向绑定
Jan 13 #Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 #Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
Php图像处理类代码分享
2012/01/19 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
js操作select控件的几种方法
2010/06/02 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
python求pi的方法
2014/10/08 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python使用turtle库绘制树
2018/06/25 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python 的AES加密与解密实现
2019/07/09 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
即兴演讲稿
2014/01/04 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
支部组织生活会方案
2014/06/10 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
四风自我剖析材料
2014/09/30 职场文书
篮球拉拉队口号
2015/12/25 职场文书
python利用while求100内的整数和方式
2021/11/07 Python
nginx常用配置conf的示例代码详解
2022/03/21 Servers