v-if 与 v-for 优先级问题是否可以通过编译时静态分析动态决定

[moonsky-all]

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>

[gme-gpl]

我建议直接禁止二者应用在同一级中, 因为这会造成一定的认知歧义 (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>

[liangduoqiang]

本来二者禁止一起使用就是为了避免一定的认知歧义，现在你直接说根据v-if的值来动态决定二者的优先级，天呐，你简直要人命。对Vue烂熟于心的人到无所谓，但是对Vue不熟悉的人就没法玩儿了。。。

[pengzhanbo]

这两个指令本来就不应该写在同一个标签中，同一个标签中无论认为哪一个指令有更高的优先级，都会有各自的理由。
你怎么假定你认为的优先级和编译器动态判断的优先级是相同的？编译器要判断多少种场景区分优先级？你要把这些场景都背下来吗？
你确定这种动态判断不会带来更多的 bug 吗？

我更建议 eslint 检查时，v-for 和 v-if 应该禁止在同一个标签上使用。