processKey() — vue Function Reference

Architecture documentation for the processKey() function in index.ts from the vue codebase.

Function typescript CompilerSFC ScriptCompiler calls 2 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ processKey() — vue Function Reference

Dependency Diagram

graph TD
  2e707572_48f7_f24b_6fa2_9fb3d14b5a06["processKey()"]
  31f9edc3_10e5_9556_86c6_7c900b922f60["processElement()"]
  31f9edc3_10e5_9556_86c6_7c900b922f60 -->|calls| 2e707572_48f7_f24b_6fa2_9fb3d14b5a06
  2e03f8d2_4a5a_f1cd_1d7b_db95ba63549e["getBindingAttr()"]
  2e707572_48f7_f24b_6fa2_9fb3d14b5a06 -->|calls| 2e03f8d2_4a5a_f1cd_1d7b_db95ba63549e
  03f2c56c_d011_12c3_4e53_66cf29e6eed1["getRawBindingAttr()"]
  2e707572_48f7_f24b_6fa2_9fb3d14b5a06 -->|calls| 03f2c56c_d011_12c3_4e53_66cf29e6eed1
  style 2e707572_48f7_f24b_6fa2_9fb3d14b5a06 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/parser/index.ts lines 470–500

function processKey(el) {
  const exp = getBindingAttr(el, 'key')
  if (exp) {
    if (__DEV__) {
      if (el.tag === 'template') {
        warn(
          `<template> cannot be keyed. Place the key on real elements instead.`,
          getRawBindingAttr(el, 'key')
        )
      }
      if (el.for) {
        const iterator = el.iterator2 || el.iterator1
        const parent = el.parent
        if (
          iterator &&
          iterator === exp &&
          parent &&
          parent.tag === 'transition-group'
        ) {
          warn(
            `Do not use v-for index as key on <transition-group> children, ` +
              `this is the same as not using keys.`,
            getRawBindingAttr(el, 'key'),
            true /* tip */
          )
        }
      }
    }
    el.key = exp
  }
}