跳到主要内容

认识

2023年06月10日
柏拉文
越努力，越幸运

一、认识​

二、细节​

2.1 解析​

2.2 生成​

<ul>
    <li v-for="(item,index) in vFor" :key="index">{{ item.value }}</li>
</ul>

生成的渲染函数如下所示:

_c('ul', _l((vFor), function(item, index) {
    return _c('li', {
        key: index
    }, [_v(_s(item.value))])
}), 0)

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 分开使用即可。