v-if和v-for的优先级

使用vue-template-complier

1. 首先我们运行下面一段代码

let compiler = require('vue-template-compiler');
const ast = compiler.compile('<div v-if="true" v-for="i in 3"></div>');
console.log(ast.render)

2.控制台打印：

with(this){return _l((3),function(i){return (true)?_c('div'):_e()})}

3.解释：
_l()表示要渲染一个列表，这个列表要渲染三项，每次渲染的时候都会执行方法：function(i){return (true)?_c('div'):_e()}，该方法内部会判断是否为true，true则会渲染div，否则为空。

4.总结：
v-for优先级高于v-if

5.解决办法：
那么遇到上面的情况，我们如何解决呢？只需要用template模板标签套一层即可，如下所示：

let compiler = require('vue-template-compiler');
const ast = compiler.compile('<template v-if="true"><div v-for="i in 3"></div></template>');
console.log(ast.render)

6.控制台打印

with(this){return (true)?_l((3),function(i){return _c('div')}):_e()}