Vue中v-for和v-if优先级(2、3)

Vue中v-for和v-if优先级(2、3)

Vue2

在Vue2当中,v-for优先级要优于v-if,也就是说,当它俩同时沿用时,v-for先遍历,v-if再判断。

Vue2源码位置

\vue-dev\src\compiler\codegen\index.js

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }
  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    ...
}

Vue3

在Vue3当中,v-if优先级要大于v-for,也就是说,当循环和判断同时在一个节点时,那么先判断再遍历。

总结

因为这种风格上的差异,所以尽量不要在一个子节点同时使用v-for和v-if。

相关推荐

  1. Vuev-forv-if优先级(2、3)

    2024-07-10 07:56:03       8 阅读
  2. vuev-ifv-for

    2024-07-10 07:56:03       3 阅读
  3. Vuev-ifv-for优先级注意事项

    2024-07-10 07:56:03       19 阅读
  4. v-forv-if优先级

    2024-07-10 07:56:03       18 阅读
  5. uniapp v-ifv-for优先级问题

    2024-07-10 07:56:03       29 阅读

最近更新

  1. Oracle(15)什么是索引(Index)?

    2024-07-10 07:56:03       0 阅读
  2. CSS 的@media规则,响应式的一种解决方案

    2024-07-10 07:56:03       0 阅读
  3. MySQL

    MySQL

    2024-07-10 07:56:03      0 阅读
  4. C++中的atomic:原子

    2024-07-10 07:56:03       0 阅读
  5. Nacos 面试题及答案整理,最新面试题

    2024-07-10 07:56:03       0 阅读
  6. 【Unity】RPG2D龙城纷争(十五)特殊加成型要诀

    2024-07-10 07:56:03       0 阅读

热门阅读

  1. 晚上定时编译android系统

    2024-07-10 07:56:03       8 阅读
  2. 摒弃传统分页:移动端开发中的无限滚动实现

    2024-07-10 07:56:03       8 阅读
  3. 程序人生 - (002)

    2024-07-10 07:56:03       10 阅读
  4. MacOS隐藏文件打开指南

    2024-07-10 07:56:03       9 阅读
  5. 基于go 1.19的站点模板爬虫

    2024-07-10 07:56:03       6 阅读
  6. Pandas在生物信息学中的应用详解

    2024-07-10 07:56:03       8 阅读