v-if 和 v-for 优先级谁更高？

vue2 说 v-for 比 v-if 优先级高

上代码证明vue2中v-for比v-if优先级高

<ul>
      <li v-for="user in users" v-if="user.age>18" :key="user.id">
        {{ user.name }}
      </li>
</ul>

模板指令的代码都会生成在render函数中，通过this.$options.render就能得到渲染函数。

created() {
    console.log('输出render函数', this.$options.render);
}

控制台输出结果为：

_vm._l是vue的列表渲染函数，作用就是循环处理users的，第9行就是嵌套在_l函数中的，也就是说，-l函数包含了user.age>18的判断，也就是每循环一次列表，就会判断一次user.age>18，我们看到最后的结果就是return后面的。
所以得到结论：在vue2中v-for优先级比v-if高。

vue3 说 v-if 比 v-for 优先级高

上代码证明vue3中v-if比v-for优先级高

<ul>
      <li v-for="user in users" v-if="user.age>18" :key="user.id">
        {{ user.name }}
      </li>
</ul>

然而浏览器报错了

说不能读取undefined的属性age,也就是没有获取到v-if指令里的user的信息，也就是先执行的v-if，而此时v-for还没有执行，所以v-if里的user是undefined。
所以得到结论：在vue3中v-if优先级比v-for高。