结论

vue2中：v-for优先级高于v-if

vue3中：v-for优先级低于v-if

验证

下面代码在vue2和vue3的不同表现

<div>
  <div v-if="flag" v-for="item in list"></div>
</div>

vue2

先看一下编译生成的render函数

function render() {
  with(this) {
    return _c('div', _l((list), function (item) {
      return (flag) ? _c('div') : _e()
    }), 0)
  }
}

可以看到，在render中，他是先循环list，在循环里判断flag

控制台查看元素

截屏2023-06-13 23.47.51.png

上述的图片中可以看到，他生成了四个注释节点

vue3

编译生成的render函数

import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, [
    (_ctx.flag)
      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.list, (item) => {
          return (_openBlock(), _createElementBlock("div"))
        }), 256 /* UNKEYED_FRAGMENT */))
      : _createCommentVNode("v-if", true)
  ]))
}

// Check the console for the AST

可以看到，在render中，他是先判断flag，flag为true，循环生成div节点，flag为false，生成一个注释节点

控制台查看元素

截屏2023-06-13 23.42.49.png

只生成了一个注释节点

当然是不建议将v-if和v-for写在同一个节点上的，如果if的条件判断是根据for中每一个item的状态来的，建议使用computed将数据处理好再做展示

v-if和v-for优先级

结论

验证

vue2

vue3