vue面试题总结

1在vue中v-if与v-for哪个优先级更高?

源码中找答案 compiler/codegen/index.js 测试

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

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

答案: 1.v-for的优先级要大于v-if的,compiler/codegen/index.js代码中 64-66代码可证明 2.如果同时出现,每次渲染都会先执行循环在判断条件,无论如何循环都避免不了,浪费了性能 3.要避免这种情况,则在外围嵌套一层,在外层进行判断,然后在内部进行v-if循环 4.还有一种情况就是 判断条件在循环里,不可避免的 for 和 if 要写在一起

<p v-for="item in items" v-if="item.isShow">{{item.title}}</p>
    
  这种情况 可以用计算属性先把items过滤一下,保证要循环的项都是要显示的