vue模板中指令无全局数字优先级表，v-if与v-for的相对顺序最关键：vue 2中v-for优先，vue 3中v-if优先但官方仍禁止同用；其余指令如v-show、v-model等作用域不同，不构成优先级冲突。
Vue 模板中指令没有全局统一的“数字优先级表”，实际执行顺序取决于编译阶段的处理逻辑，核心是：v-for 和 v-if 的相对顺序最关键，其他指令（如 v-show、v-model、v-bind）不与它们构成直接冲突，通常按声明顺序或内部机制自然执行。
v-if 与 v-for：版本差异决定行为
这是唯一被 Vue 官方明确说明存在优先级关系且有版本变更的一对指令：
- Vue 2 中：v-for 优先于 v-if —— 先遍历整个数组，再对每一项做条件判断。可能导致大量无效循环和渲染开销。
- Vue 3 中：v-if 优先于 v-for —— 先判断条件是否成立，再决定是否进入循环。但注意：Vue 3 实际仍会警告“避免在同一元素上同时使用”，因为底层 render 函数生成逻辑未真正反转执行流，只是优化了过滤时机；官方文档和 ESLint 规则均禁止该写法。
其他常用指令基本不参与“优先级竞争”
v-show、v-model、v-bind、v-on 等指令作用域不同，不会和 v-if/v-for 形成逻辑覆盖：
- v-show 只控制 display 样式，不影响 DOM 是否存在，和 v-if 是互斥策略，不是优先级先后问题。
- v-model 是语法糖，本质是 v-bind + v-on 组合，编译后拆解为独立操作，不参与模板指令排序。
- v-bind 和 v-on 属于属性/事件绑定，在元素创建时即生效，早于 v-if 的挂载/卸载或 v-for 的循环节点生成。
自定义指令的执行时机由注册方式决定
自定义指令本身不参与内置指令的优先级比对，它的钩子函数在对应生命周期触发：
- bind / mounted 钩子在 v-if 判断通过、元素插入 DOM 后才执行；
- 如果用在 v-for 渲染的元素上，每个实例会单独调用一次 bind/mount；
- Vue 2 支持 priority 字段（已废弃），Vue 3 完全移除，靠组合式逻辑或计算属性前置处理替代。
真正影响渲染结果的是结构层级，不是指令堆砌
比起纠结“哪个指令先跑”，更有效的方式是用模板结构表达意图：
- 需要条件性地渲染整个列表 → 把 v-if 放在外层 template 或容器元素上；
- 需要筛选列表数据 → 用 computed 返回过滤后数组，v-for 绑定该计算属性；
- 需要对每项做独立显隐 → v-show 更合适，避免频繁挂载/卸载开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
