认识
2024年03月18日
一、认识
二、细节
2.1 解析
2.2 生成
<div v-if="vIf"> v-if 指令 </div>
生成的渲染函数如下所示:
(vIf) ? _c('div', [_v(" v-if 指令 ")]) : _e()
因此, v-if 节点的处理结果是一个三元表达式
2.3 渲染
三、问题
3.1 Vue.js 2.0 v-if 与 v-for 的优先级？
Vue.js 2.0 中, 在同一元素上使用 v-if 和 v-for 时, v-for 比 v-if 的优先级更高(源码中 v-for 优先被处理), 这意味着 v-if 将分别重复运行于每个 v-for 循环中。当 v-for 与 v-if 在同一元素上结合使用时, 每次循环迭代时都会重新计算条件, 重新渲染和销毁元素, 可能会导致不必要的性能损耗。正确的做法是通过 computed 筛选需要渲染的元素 或者通过将 v-for 和 v-if 分开使用即可。