vue笔记：v-if和v-for不能在同一标签使用

在vue实际开发中，我们避免不了会使用v-for和v-if来操作数据，但是v-for和v-if同时使用时，有一个先后运行的优先级，v-for比v-if的优先级更高，这就说明在v-for的每次循环运行中每一次都会调用v-if的判断，所以不推荐v-if和v-for在同一个标签内同时使用

一、理解：

v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题。

一般时候把v-if放在外层，如果不符合就不去执行了。

也可以使用计算属性computed来代替v-if

二、原理：

const VueTemplateCompiler = require('vue-template-compiler');
let r1 = VueTemplateCompiler.compile(`<div v-if="false" v-for="i in 3">hello</div>`);
// 编译后
with(this) {
    
    
  return _l((3), function (i) {
    
    
    return (false) ? _c('div', [_v("hello")]) : _e()
  })
}
// 这样会先循环三次，然后给每一个元素都进行判断，这样性能很低
console.log(r1.render);

三.解决

1>ul和li搭配使用，或者是渲染父级标签下的子标签，可以使用如下方法：

<ul v-if="state">
	<li v-for="(item,id) in list" :key="id"></li>
</ul>

2>可以使用过滤器将v-if中的判断转移到vue的computed的计算属性中，方法如下：

<ul>
	<li v-for="(item,id) in formList" :key="id"></li>
</ul>
 
//利用vue的计算属性，过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
computed: {
    
    
	formList: function () {
    
    
		return this.list.filter(function (item) {
    
    
			return item.state
		})
	}
}

本文来源：
vue核心面试题：为什么v-for和v-if不能连用：https://blog.csdn.net/qq_42072086/article/details/107956518
v-for和v-if一起使用的坑。。。：https://blog.csdn.net/Kreme/article/details/89310433?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.add_param_isCf

vue笔记：v-if和v-for不能在同一标签使用

猜你喜欢