What problem does this feature solve?

同时使用 v-if 和 v-for 时，在Vue2中 v-for 的优先级是比 v-if 优先级更高的，但在 vue3 中变成了 v-if 比 v-for 的优先级更高，所以我想是否可以通过编辑时的静态代码分析动态决定 v-if 和 v-for 的优先级。

如：

1. <div v-for="(value, key, index) in list" v-if="value.size === 20"></div>
2. <div v-for="(value, key, index) in list" v-if="user.age > 20"></div>

在例 1 中，v-if 使用了 v-for 声明的变量 value，就将这里编译成 v-for 比 v-if 优先级更高； 在里 2 中，v-if 只用到了 v-for 之外的变量，这里就编译成 v-if 比 v-for 的优先级更高；

其他情况，如 this 里也出现了 v-for 声明的变量 value，肯定是局部作用域优先，用到的仍然是 v-for 声明的。

What does the proposed API look like?

1. <div v-for="(value, key, index) in list" v-if="value.size === 20"></div>
2. <div v-for="(value, key, index) in list" v-if="user.age > 20"></div>

我建议直接禁止二者应用在同一级中, 因为这会造成一定的认知歧义 (I don't think using both directives on the same level is a good idea, as it creates some cognitive ambiguity)

针对第一种情况, 你可以写成 (For the first situation, you can write)

<div v-for="(value, key, index) in list.map(item => item.value.size === 20)"></div>

针对第二种情况, 你可以写成 (For the second situation, you can write)

<div v-for="(value, key, index) in (user.age > 20 ? list : [])"></div>