vue核心面试题：为什么v-for和v-if不能连用

一、理解：

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