使用vue-template-complier
- 首先我们运行下面一段代码
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()}
