vue核心面试题:为什么v-for和v-if不能连用
一、理解:1.v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题。一般时候把v-if放在外层,如果不符合就不去执行了。二、原理:const VueTemplateCompiler = require('vue-template-compiler');let r1 = VueTem
·
一、理解:
1.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);
更多推荐
已为社区贡献13条内容
所有评论(0)