先上代码，通过 script 标签方式引入 vue.js（2.x版本）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-if&v-for</title>
</head>
<body>
<div id="demo">
<h4>v-if 与 v-for 的优先级问题</h4>
<p v-if="isShow" v-for="(item,i) in children">{{ item.title }}</p>
</div>
<!-- <script src="vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#demo',
data() {
return {
name: '彭',
children: [{ title: '标题一' }, { title: '标题一' }],
isShow: true
};
}
});
console.log(app.$options.render);
</script>
</body>
</html>
在打印出的 app.$options.render 中会发现，v-for 优先级高于 v-if
(function anonymous() { with (this) { return _c('div', { attrs: { "id": "demo" } }, [_c('h4', [_v("v-if 与 v-for 的优先级问题")]), _v(" "), _l((children), function(item, i) { return (isShow) ? _c('p', [_v(_s(item.title))]) : _e() })], 2) } } )
那 vue3.x版本呢？
个人只是通过 npm run build 打包后，看js文件验证的：v-if 的优先级高于 v-for ！
const s = d([ // 自己定义的数组 { title: "\u6807\u9898\u4E00" }, { title: "\u6807\u9898\u4E8C" }, ]); let v = d(!0); // 自己定义的布尔值 return (y, m) => ( c(), p( f, null, [ a("h1", null, u(r.msg), 1), a( "h2", { onClick: m[0] || (m[0] = (...g) => i(l) && i(l)(...g)) }, u(t.value), 1 ), a("h4", H, u(n.value), 1), a("h4", null, u(i(o).gander), 1), i(v) // 判断定义的布尔值 ? (c(!0), p( f, { key: 0 }, x(s.value, (g, W) => (c(), p("p", null, u(g.title), 1))), // 进行 for 循环 256 )) : A("", !0), ], 64 ) );
总结：
vue2.x 版本：v-for 优先级高于 v-if
vue3.x 版本：v-if 优先级高于 v-for
总的来说，v-if 优先级高于 v-for 可以减少性能的浪费；
如果在 vue2.x 版本，v-if & v-for 必须写在同一级怎么办？
答：在外层嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环
template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
https://www.cnblogs.com/tu-0718/p/11177236.html