先说结论：vue2中v-for优先执行，vue3中v-if优先执行

Vue2版本

  • 如果同时使用v-for和v-if，代码会报错

    示例代码

    1. <div v-if="false" v-for="item in list" :key="item">{{ item }}</div>

    运行结果：

    image.png

    查看vue2源码可以知道：v-for是在v-if之前执行

  • 也就说先把节点遍历渲染后，在重复的使用v-if去判断是否挂载，这样会造成大量的性能浪费。

  • 官方推荐将v-if放在最外层执行

    1. ...
    2.   if (el.staticRoot && !el.staticProcessed) {
    3.     return genStatic(el, state)
    4.   } else if (el.once && !el.onceProcessed) {
    5.     return genOnce(el, state)
    6.   } else if (el.for && !el.forProcessed) {
    7.     return genFor(el, state)
    8.   } else if (el.if && !el.ifProcessed) {
    9.     return genIf(el, state)
    10.   } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    11.     return genChildren(el, state) || 'void 0'
    12.   } else if (el.tag === 'slot') {
    13.     return genSlot(el, state)
    14.   } else {
    15. ...

    Vue3版本

  • 在vue3中如果同时使用v-if和v-for不会报错，页面正常显示

  • eslint会有警告

    那他们的执行顺序是怎样的呢？

  • 我们尝试在v-if中访问v-for出来的变量

    1. <div v-if="item" v-for="item in list" :key="item">{{ item }}</div>

  • 执行后，发现页面什么也不展示，猜测是因为item是undefined，然后更改一下代码

    1. <div v-if="item === undefined" v-for="item in list" :key="item">{{ item }}</div>

  • 这样后，页面就显示出来了

image.png

推断：

  • 由此可以推断出，v-if先执行，因此他无法访问v-for中的变量