Vue 3源码深度解析之：`Vue`的编译器：它如何处理`v-if`和`v-for`的优先级。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是老码，今儿咱们来聊聊Vue 3编译器里头，v-if和v-for这对冤家的优先级问题。这俩货都是Vue模板里的重量级指令，用得好能让代码简洁明了，用不好那就是埋雷挖坑。别急，今天咱就把它扒个底朝天，看看Vue 3编译器是怎么摆平这俩大佬的。

开场白：模板编译的前世今生

要搞清楚v-if和v-for的优先级，咱们得先简单了解下Vue的模板编译过程。简单来说，就是把你在.vue文件里写的那些HTML模板，变成JavaScript代码的过程。这个过程大致分为三个阶段：

解析 (Parsing): 把模板字符串变成抽象语法树 (Abstract Syntax Tree, AST)。AST就像是代码的骨架，包含了模板的所有信息。
转换 (Transforming): 对AST进行各种优化和转换，比如处理指令、静态节点提升等等。
生成 (Generating): 把转换后的AST生成最终的渲染函数 (render function)。这个渲染函数就是Vue组件实际渲染视图时执行的代码。

今天咱们主要关注的是转换 (Transforming) 阶段，因为v-if和v-for的优先级处理，就是在这一步完成的。

正餐：v-if和v-for的优先级之争

在Vue 2时代，v-if和v-for如果同时用在同一个元素上，v-for的优先级更高。这意味着，Vue会先循环这个元素，然后再对每次循环的结果判断v-if。这种行为可能会导致一些性能问题，因为即使某些元素根本不需要渲染，也会先被循环一遍。

<!-- Vue 2 的行为 -->
<div v-if="isShow" v-for="item in items" :key="item.id">{{ item.name }}</div>

在上面的例子中，即使isShow是false，items也会被循环一遍。

为了解决这个问题，Vue 3对v-if和v-for的优先级进行了调整。在Vue 3中，v-if的优先级高于v-for。这意味着，Vue会先判断v-if，只有当条件为真时，才会执行v-for循环。

<!-- Vue 3 的行为 -->
<div v-if="isShow" v-for="item in items" :key="item.id">{{ item.name }}</div>

现在，只有当isShow是true时，items才会被循环。

源码剖析：Vue 3编译器如何处理优先级

为了更深入地了解Vue 3是如何实现这种优先级的，咱们来扒一下Vue 3编译器的源码。这里我们主要关注transformElement函数，因为它是处理元素节点的核心函数。

// packages/compiler-core/src/transforms/transformElement.ts

import { NodeTransform } from '../transform'
import {
  NodeTypes,
  ElementNode,
  CallExpression,
  createCallExpression,
  VNodeCall,
  createVNodeCall,
  JSChildNode,
  ExpressionNode,
  TemplateTextChildNode,
  CompoundExpressionNode,
  SimpleExpressionNode,
} from '../ast'
import {
  CREATE_ELEMENT_VNODE,
  TO_DISPLAY_STRING,
  OPEN_BLOCK,
  CREATE_BLOCK,
  CREATE_TEXT,
  helperNameMap,
} from '../runtimeHelpers'
import { createCompilerError, ErrorCodes } from '../errors'
import {
  findProp,
  isBindKey,
  isDirectiveNode,
  isStaticArgOf,
  isOn,
  parseAttributeValue,
  DirectiveNode,
  AttributeNode,
} from '../utils'
import { transformVIf } from './vIf' // 引入 v-if 的 transform 函数
import { transformVFor } from './vFor' // 引入 v-for 的 transform 函数

export const transformElement: NodeTransform = (node, context) => {
  if (node.type === NodeTypes.ELEMENT) {
    return () => {
      const { tag, props } = node
      const isComponent = node.tagType === 1

      let vFor: DirectiveNode | undefined
      let vIf: DirectiveNode | undefined

      // 1. 检查是否存在 v-if 和 v-for 指令
      for (let i = 0; i < props.length; i++) {
        const prop = props[i]
        if (prop.type === NodeTypes.DIRECTIVE) {
          if (prop.name === 'if' && !vIf) {
            vIf = prop
          } else if (prop.name === 'for' && !vFor) {
            vFor = prop
          }
        }
      }

      // 2. 先处理 v-if，如果存在
      if (vIf) {
        transformVIf(node, context)
      }

      // 3. 再处理 v-for，如果存在
      if (vFor) {
        transformVFor(node, context)
      }

      // ... 其他代码，比如处理属性、事件等等
    }
  }
}

从上面的代码片段可以看出，transformElement函数首先会检查当前元素节点是否存在v-if和v-for指令。关键在于，它会先调用transformVIf函数处理v-if指令，然后再调用transformVFor函数处理v-for指令。这就是Vue 3实现v-if优先级高于v-for的核心逻辑。

transformVIf 和 transformVFor 函数会把AST节点转换成对应的渲染函数代码。例如， transformVIf会将AST节点转换为一个条件渲染的节点，而transformVFor会将AST节点转换为一个循环渲染的节点。

详细解析transformVIf 和 transformVFor

虽然我们不能把所有的代码都贴出来，但是我们可以大致了解一下transformVIf 和 transformVFor 这两个函数的实现原理。

transformVIf: 这个函数会将带有 v-if 指令的元素节点转换成一个三元表达式或者一个 createBlock 函数调用，用于条件渲染。核心思想是根据条件判断是否渲染该元素。
transformVFor: 这个函数会将带有 v-for 指令的元素节点转换成一个 renderList 函数调用，用于循环渲染。核心思想是遍历数据源，然后为每个数据项创建一个对应的虚拟节点。

举个栗子：代码示例

为了更清晰地说明这个问题，咱们来看一个完整的例子。假设我们有以下模板：

<template>
  <div v-if="showList" v-for="item in list" :key="item.id">
    {{ item.name }}
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showList = ref(true);
    const list = ref([
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' },
    ]);

    return {
      showList,
      list,
    };
  },
};
</script>

经过Vue 3编译器处理后，这段模板会被转换成类似下面的JavaScript代码：

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.showList)
    ? (_openBlock(), _createElementBlock("div", null, _renderList(_ctx.list, (item) => {
        return _createElementVNode("div", { key: item.id }, _toDisplayString(item.name), 1 /* TEXT */)
      }), 1 /* KEYED_FRAGMENT */))
    : _createElementVNode("div")
}

从上面的代码可以看出，首先会判断_ctx.showList的值，如果为true，才会执行_renderList函数进行循环渲染。如果为false，则直接渲染一个空的div。

Vue 2 的不同之处

在Vue 2中，如果v-if和v-for同时存在于同一个元素上，Vue 2会先执行v-for，然后再对每次循环的结果判断v-if。这会导致即使v-if的条件为false，v-for也会被执行，从而浪费性能。

为了避免这种情况，在Vue 2中，通常的做法是将v-if放在外层元素上，将v-for放在内层元素上。

<!-- Vue 2 推荐的做法 -->
<template>
  <div v-if="showList">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

总结：优先级带来的好处与注意事项

Vue 3中v-if优先级高于v-for的调整，主要带来了以下好处：

性能优化: 避免了不必要的循环，提高了渲染性能。
代码可读性: 使代码逻辑更加清晰，易于理解。

当然，在使用v-if和v-for时，还需要注意以下几点：

避免滥用: 不要为了追求简洁而滥用v-if和v-for，应根据实际情况选择合适的方案。
注意key属性: 在使用v-for时，一定要提供key属性，以便Vue能够正确地追踪每个节点的身份，从而提高更新效率。
了解Vue版本: 确保你了解当前使用的Vue版本，以便正确地理解v-if和v-for的优先级。

表格总结

特性	Vue 2	Vue 3	优点
优先级	`v-for` > `v-if`	`v-if` > `v-for`	避免不必要的循环，提高渲染性能；使代码逻辑更加清晰，易于理解。
推荐写法	`v-if`放在外层，`v-for`放在内层	`v-if`和`v-for`可以放在同一元素上	Vue 3优化后，可以直接写在同一元素，减少了不必要的DOM层级。
性能	可能存在性能问题，尤其是在`v-if`条件为`false`时	性能更好，避免了不必要的循环	在数据量较大，且`v-if`条件经常为`false`的情况下，Vue 3的性能优势更加明显。
兼容性	需要注意Vue版本的差异，选择合适的写法	无需特殊处理，直接使用即可	减少了开发者的心智负担，无需考虑Vue版本差异导致的兼容性问题。

结束语：举一反三，融会贯通

好了，关于Vue 3编译器如何处理v-if和v-for的优先级，咱们就聊到这儿。希望通过今天的讲解，大家能够对Vue的模板编译过程有更深入的了解，也能够更加灵活地运用v-if和v-for指令。记住，理解原理才能更好地解决问题，才能写出更优雅、更高效的代码。

下次有机会，咱们再聊聊Vue 3编译器的其他有趣特性。拜拜了您嘞！

发表回复 取消回复

发表回复取消回复