深入解析 Vue 源码：揭秘 v-for 和 v-if 的优先级之谜

Vue.js 指令解析过程

为了理解 v-for 和 v-if 的优先级，我们需要首先了解 Vue.js 指令的解析过程。Vue.js 在解析指令时，会经历以下三个步骤：

1. 词法分析（Lexical analysis）：将模板字符串解析成一个个标记（token）。
2. 语法分析（Syntax analysis）：将标记组合成语法树。
3. 代码生成（Code generation）：将语法树编译成 JavaScript 代码。

源码分析

在 Vue.js 源码中，指令的优先级是由 parseDirective 函数决定的。该函数会根据指令的名称和参数来计算出一个优先级值。优先级值越高，指令的优先级就越高。

export function parseDirective(name, value, modifiers, important, warn) {
  // ...
  const instance = this;
  const directive = resolveAsset(instance.$options, 'directives', name);
  if (!directive) {
    process.env.NODE_ENV !== 'production' && warn(
      'failed to resolve directive: ' + name
    );
    return;
  }
  // ...
  const expression = parseExpression(value, modifiers);
  if (!expression) {
    process.env.NODE_ENV !== 'production' && warn(
      'invalid expression: ' + value
    );
    return;
  }

  // ...

  return {
    name,
    rawName,
    value,
    arg,
    isDynamicArg,
    modifiers,
    directive,
    expression
  };
}

从源码中可以看出，v-for 和 v-if 指令的优先级都是 1000。这意味着它们具有相同的优先级。但是，在实际使用中，v-for 指令的优先级似乎要高于 v-if 指令。这是因为 v-for 指令会生成一个循环体，而 v-if 指令只会生成一个条件判断。因此，当 v-for 指令和 v-if 指令同时出现在同一个元素上时，v-for 指令会先执行，然后 v-if 指令再执行。

结论

通过源码分析，我们可以得出结论：v-for 和 v-if 指令的优先级都是 1000，它们具有相同的优先级。但是，在实际使用中，v-for 指令的优先级似乎要高于 v-if 指令。这是因为 v-for 指令会生成一个循环体，而 v-if 指令只会生成一个条件判断。因此，当 v-for 指令和 v-if 指令同时出现在同一个元素上时，v-for 指令会先执行，然后 v-if 指令再执行。