一、理解:

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);

 

Logo

前往低代码交流专区

更多推荐