跳到主要内容

认识

2024年03月13日
柏拉文
越努力，越幸运

一、认识​

二、细节​

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 3.0 v-if 与 v-for 的优先级？​

Vue.js 3.0 中, 在同一元素上使用 v-if 和 v-for 时, v-if 比 v-for 的优先级更高（源码中 v-if 指令优先被处理）, 这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。正确的做法是通过 computed 筛选需要渲染的元素 或者通过将 v-for 和 v-if 分开使用即可。