Vue 3源码极客之：`Vue`的`Compiler`：如何处理`v-if`和`v-for`的`key`属性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们来聊聊 Vue 3 源码里那些“不得不说”的秘密，特别是关于 v-if 和 v-for 这俩兄弟，以及它们身边形影不离的 key 属性。这可不是简单的“增删改查”，这里面藏着 Vue 性能优化的核心思想。准备好，咱们这就开车！

开场白：Vue 渲染的“记忆”与“身份”

在 Vue 的世界里，渲染 DOM 元素并非简单的“无脑”替换。Vue 会尽量复用已存在的元素，以提高渲染效率。这就需要 Vue 能够区分哪些元素是可以复用的，哪些是需要新增或删除的。而 key 属性，就是 Vue 用来识别这些元素的“身份证”。

想想看，如果每次数据更新都重新渲染整个列表，那得多浪费性能啊！key 属性就像是给每个列表项贴上了标签，让 Vue 知道哪些项是“老熟人”，哪些是“新面孔”。

第一部分：v-if 的“存在”与“消失”

v-if 指令决定了一个元素是否应该被渲染。当条件为真时，元素才会出现在 DOM 树中；否则，元素会被完全移除。

1.1 源码中的 v-if 处理流程

在 Vue 的 Compiler 阶段，v-if 指令会被转换成渲染函数中的条件判断语句。简单来说，就是用 JavaScript 的 if 语句来控制元素的渲染。

// 简化后的代码，仅用于说明原理
function render() {
  return (condition)
    ? h('div', { id: 'myDiv' }, 'This is visible') // 条件为真，渲染元素
    : null; // 条件为假，不渲染任何东西
}

这里的 h 函数是 Vue 的 createElement 函数的简写，用于创建 VNode。如果 condition 为真，h 函数就会创建一个 div 元素的 VNode，否则返回 null，表示不渲染任何元素。

1.2 key 在 v-if 中的作用

虽然 v-if 本身不强制要求使用 key 属性，但在某些情况下，key 属性可以帮助 Vue 更高效地处理元素。

例如，考虑以下场景：

<template>
  <div>
    <input v-if="showInput" key="input1" type="text">
    <textarea v-else key="textarea1"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showInput: true
    };
  }
};
</script>

在这个例子中，当 showInput 的值在 true 和 false 之间切换时，Vue 会根据 key 属性来判断是否需要重新创建元素。如果没有 key 属性，Vue 可能会尝试复用之前的元素，导致一些意外的行为，比如文本框的内容被保留了下来。

1.3 没有 key 的坑

如果没有 key，Vue 可能会认为新旧元素是同一个，然后仅仅更新元素的属性。这在某些情况下会导致问题，比如：

状态丢失： 如果元素内部有状态（比如文本框的输入内容），Vue 可能会保留这些状态，导致显示错误。
过渡效果异常： 如果使用了过渡效果，Vue 可能会错误地应用过渡效果，导致动画不流畅。

第二部分：v-for 的“循环”与“复用”

v-for 指令用于循环渲染列表。这是 Vue 中最常用的指令之一。

2.1 源码中的 v-for 处理流程

在 Compiler 阶段，v-for 指令会被转换成渲染函数中的循环语句。Vue 会遍历数据源，为每个数据项创建一个 VNode。

// 简化后的代码，仅用于说明原理
function render() {
  return data.map(item => {
    return h('li', { key: item.id }, item.name);
  });
}

这里的 data 是数据源，map 函数用于遍历数据源，并为每个数据项创建一个 li 元素的 VNode。key 属性被设置为数据项的 id 属性。

2.2 key 在 v-for 中的“灵魂”作用

在 v-for 循环中，key 属性至关重要。它告诉 Vue 如何区分不同的列表项，以便更高效地更新 DOM。

2.2.1 为什么需要 key？

考虑以下场景：

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    removeItem(id) {
      this.list = this.list.filter(item => item.id !== id);
    }
  }
};
</script>

在这个例子中，如果我们要删除列表中的一个元素，Vue 需要知道哪些元素需要被删除，哪些元素需要被保留。如果没有 key 属性，Vue 可能会简单地将最后一个元素删除，而不是删除指定的元素。

2.2.2 Vue 的 Diff 算法

Vue 使用 Diff 算法来比较新旧 VNode 树，并找出需要更新的 DOM 元素。key 属性是 Diff 算法的关键。

Diff 算法的大致步骤如下：

比较根节点： 如果根节点不同，直接替换整个树。
比较属性： 如果根节点相同，比较属性是否有变化，并更新属性。
比较子节点： 如果根节点有子节点，递归比较子节点。

在比较子节点时，Vue 会使用 key 属性来判断哪些子节点是相同的。如果两个子节点的 key 属性相同，Vue 会认为它们是同一个节点，并尝试复用它们。如果两个子节点的 key 属性不同，Vue 会认为它们是不同的节点，并重新创建它们。

2.3 key 的最佳实践

使用唯一且稳定的 key： key 属性应该是唯一的，并且在数据更新后保持不变。通常情况下，可以使用数据项的 id 属性作为 key。
避免使用索引作为 key： 在某些情况下，可以使用数组的索引作为 key。但是，当列表发生变化时（比如插入或删除元素），索引可能会发生变化，导致 Vue 无法正确地复用元素。
在 v-for 中必须使用 key： 虽然在某些简单的情况下，可以省略 key 属性。但是，为了避免潜在的问题，建议始终在 v-for 中使用 key 属性。

第三部分：key 的“误用”与“滥用”

虽然 key 属性很重要，但也不能滥用。过度使用 key 属性可能会导致性能问题。

3.1 不必要的 key

在某些情况下，使用 key 属性是没有必要的。比如，如果列表中的元素是静态的，或者列表不会发生变化，那么可以省略 key 属性。

3.2 错误的 key

如果 key 属性的值不是唯一的，或者不稳定，那么可能会导致 Vue 无法正确地复用元素，从而导致性能问题。

3.3 key 的性能影响

虽然 key 属性可以提高 Vue 的渲染效率，但它也会带来一定的性能开销。Vue 需要维护一个 key 到 VNode 的映射，这需要占用一定的内存和 CPU 资源。

第四部分：v-if 和 v-for 的“爱恨情仇”

v-if 和 v-for 可以一起使用，但需要注意一些问题。

4.1 避免在同一个元素上同时使用 v-if 和 v-for

如果在同一个元素上同时使用 v-if 和 v-for，v-for 的优先级更高。这意味着 Vue 会先循环渲染元素，然后再根据 v-if 的条件来决定是否显示元素。这可能会导致性能问题，因为 Vue 会渲染一些不必要的元素。

<!-- 错误的用法 -->
<template>
  <div>
    <li v-for="item in list" v-if="item.isVisible" :key="item.id">{{ item.name }}</li>
  </div>
</template>

在这个例子中，Vue 会循环渲染所有的 li 元素，然后再根据 item.isVisible 的值来决定是否显示元素。

4.2 使用 template 标签

为了避免在同一个元素上同时使用 v-if 和 v-for，可以使用 template 标签。template 标签不会被渲染到 DOM 中，因此可以用来包裹 v-for 循环。

<!-- 正确的用法 -->
<template>
  <div>
    <template v-for="item in list" :key="item.id">
      <li v-if="item.isVisible">{{ item.name }}</li>
    </template>
  </div>
</template>

在这个例子中，Vue 会先根据 v-if 的条件来决定是否显示 li 元素，然后再循环渲染 li 元素。

4.3 使用计算属性

还可以使用计算属性来过滤列表，从而避免在同一个元素上同时使用 v-if 和 v-for。

<template>
  <div>
    <li v-for="item in visibleList" :key="item.id">{{ item.name }}</li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1', isVisible: true },
        { id: 2, name: 'Item 2', isVisible: false },
        { id: 3, name: 'Item 3', isVisible: true }
      ]
    };
  },
  computed: {
    visibleList() {
      return this.list.filter(item => item.isVisible);
    }
  }
};
</script>

在这个例子中，visibleList 计算属性会过滤掉 isVisible 为 false 的元素，然后 Vue 循环渲染 visibleList 中的元素。

第五部分：源码片段分析

咱们来扒一扒 Vue 3 源码，看看 key 是怎么被使用的。以下代码片段来自 Vue 3 的 runtime-core 模块，主要负责 VNode 的创建和更新。

// 简化后的代码，仅用于说明原理
function patch(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
  // ... 省略其他逻辑

  const { type, shapeFlag } = n2;

  switch (type) {
    // ... 省略其他逻辑
    case Fragment:
      processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
      break;
    case Text:
      processText(n1, n2, container, anchor);
      break;
    default:
      if (shapeFlag & ShapeFlags.ELEMENT) {
        processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
        // console.log("element patching")
      } else if (shapeFlag & ShapeFlags.COMPONENT) {
        processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
        ;(type as typeof TeleportImpl).process(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals
        )
      } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
        ;(type as typeof SuspenseImpl).process(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals
        )
      }
  }
}

function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
  if (!n1) {
    mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
  } else {
    patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized)
  }
}

function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {
  const el = (n2.el = n1.el!)
  let { data: oldProps } = n1
  const { data: newProps } = n2
  const areChildrenSVG = isSVG && (n2.type === 'svg' || n1.type === 'svg')

  if (oldProps !== newProps) {
    patchProps(el, n2, oldProps || EMPTY_OBJ, newProps || EMPTY_OBJ, parentComponent, parentSuspense, isSVG)
  }

  if (n1.children !== n2.children) {
    patchChildren(n1, n2, el, anchor, parentComponent, parentSuspense, isSVG, optimized)
  }
}

function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
  const c1 = n1.children
  const c2 = n2.children

  const prevShapeFlag = n1.shapeFlag
  const shapeFlag = n2.shapeFlag

  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    // ...
  } else if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN && shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    patchKeyedChildren(
      c1,
      c2,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized
    )
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    // ...
  } else if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    // ...
  } else {
    // ...
  }
}

function patchKeyedChildren(
  c1,
  c2,
  container,
  anchor,
  parentComponent,
  parentSuspense,
  isSVG,
  optimized
) {
  let i = 0
  const l2 = c2.length
  let e1 = c1.length - 1
  let e2 = l2 - 1

  // 1. sync from start
  while (i <= e1 && i <= e2) {
    const n1 = c1[i]
    const n2 = c2[i]
    if (isSameVNodeType(n1, n2)) {
      patch(
        n1,
        n2,
        container,
        null,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      )
    } else {
      break
    }
    i++
  }

  // 2. sync from end
  while (i <= e1 && i <= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]
    if (isSameVNodeType(n1, n2)) {
      patch(
        n1,
        n2,
        container,
        null,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      )
    } else {
      break
    }
    e1--
    e2--
  }

  // 3. common sequence + mount
  if (i > e1) {
    if (i <= e2) {
      const nextPos = e2 + 1
      const anchor = nextPos < l2 ? c2[nextPos].el : anchor
      while (i <= e2) {
        patch(
          null,
          c2[i],
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized
        )
        i++
      }
    }
  }

  // 4. common sequence + unmount
  else if (i > e2) {
    while (i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)
      i++
    }
  }

  // 5. unknown sequence
  else {
    let s1 = i
    let s2 = i

    // 5.1 build key:index map for newChildren
    const keyToNewIndexMap: Map<string | number | symbol, number> = new Map()
    for (let i = s2; i <= e2; i++) {
      const nextChild = c2[i]
      if (nextChild.key != null) {
        if (__DEV__ && keyToNewIndexMap.has(nextChild.key)) {
          warn(
            `Duplicate keys found during update: "${String(
              nextChild.key
            )}". Make sure keys are unique.`
          )
        }
        keyToNewIndexMap.set(nextChild.key, i)
      }
    }

    // 5.2 loop through old children left to be patched and try to patch
    let j
    let patched = 0
    const toBePatched = e2 - s2 + 1
    let moved = false
    // used to track whether any element has moved
    let maxNewIndexSoFar = 0
    // force removing old vnodies when addition / removal happens in the same sequence.
    const newIndexToOldIndexMap = new Array(toBePatched)
    for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0

    for (i = s1; i <= e1; i++) {
      const prevChild = c1[i]
      if (patched >= toBePatched) {
        // all new children have been patched so this can only be a removal
        unmount(prevChild, parentComponent, parentSuspense, true)
        continue
      }

      let newIndex
      if (prevChild.key != null) {
        newIndex = keyToNewIndexMap.get(prevChild.key)
      } else {
        // search without key
        for (j = s2; j <= e2; j++) {
          if (
            newIndexToOldIndexMap[j - s2] === 0 &&
            isSameVNodeType(prevChild, c2[j])
          ) {
            newIndex = j
            break
          }
        }
      }

      if (newIndex === undefined) {
        unmount(prevChild, parentComponent, parentSuspense, true)
      } else {
        newIndexToOldIndexMap[newIndex - s2] = i + 1
        if (newIndex >= maxNewIndexSoFar) {
          maxNewIndexSoFar = newIndex
        } else {
          moved = true
        }
        patch(
          prevChild,
          c2[newIndex],
          container,
          null,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized
        )
        patched++
      }
    }

    // 5.3 move and mount
    // generate longest stable subsequence only when moved = true
    const increasingNewIndexSequence = moved
      ? getSequence(newIndexToOldIndexMap)
      : EMPTY_ARR

    j = increasingNewIndexSequence.length - 1
    // looping backwards so that we can use last one as the anchor
    for (i = toBePatched - 1; i >= 0; i--) {
      const nextIndex = s2 + i
      const nextChild = c2[nextIndex]
      const anchor =
        nextIndex + 1 < l2 ? c2[nextIndex + 1].el : anchor
      if (newIndexToOldIndexMap[i] === 0) {
        // mount new
        patch(
          null,
          nextChild,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized
        )
      } else if (moved) {
        // move if:
        // There is no stable subsequence (e.g. a reverse list)
        // OR current node is not among the stable sequence
        if (j < 0 || i !== increasingNewIndexSequence[j]) {
          move(nextChild, container, anchor, MoveType.MOVE)
        } else {
          j--
        }
      }
    }
  }
}

function isSameVNodeType(n1, n2) {
  return (
    n1.type === n2.type &&
    n1.key === n2.key
  )
}

这段代码展示了 Vue 如何比较新旧 VNode 树的子节点，并使用 key 属性来判断哪些节点是相同的。isSameVNodeType 函数会比较两个 VNode 的 type 和 key 属性，如果它们都相同，就认为这两个 VNode 是相同的。

在 patchKeyedChildren 函数中，Vue 会先创建一个 keyToNewIndexMap，用于存储新 VNode 树中每个节点的 key 和索引。然后，Vue 会遍历旧 VNode 树，并尝试在 keyToNewIndexMap 中查找对应的节点。如果找到了对应的节点，Vue 会认为这两个节点是相同的，并尝试复用它们。如果没有找到对应的节点，Vue 会认为这个节点已经被删除。

总结：key 的重要性

总而言之，key 属性在 Vue 中扮演着至关重要的角色。它可以帮助 Vue 更高效地更新 DOM，提高渲染效率。

属性	作用
`key`	唯一标识 VNode，帮助 Vue 区分不同的元素，提高渲染效率。
`v-if`	根据条件判断是否渲染元素。
`v-for`	循环渲染列表。
Diff 算法	Vue 用来比较新旧 VNode 树的算法，`key` 属性是 Diff 算法的关键。

希望今天的分享能够帮助大家更好地理解 Vue 3 源码中 v-if 和 v-for 的 key 属性的处理方式。记住，合理使用 key 属性，可以大大提高 Vue 应用的性能！下次再见啦！

发表回复 取消回复

发表回复取消回复