processKey() — vue Function Reference

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

Function typescript CompilerSFC TemplateTransformer calls 2 called by 1

Entity Profile

CompilerSFC→ TemplateTransformer→ processKey() — vue Function Reference

Dependency Diagram

graph TD
  57d2dc45_0fa0_bba6_c720_eacb54a1ee00["processKey()"]
  320ee0f4_351d_a6b2_1c1c_f0f6f42fb987["index.ts"]
  57d2dc45_0fa0_bba6_c720_eacb54a1ee00 -->|defined in| 320ee0f4_351d_a6b2_1c1c_f0f6f42fb987
  d580ca1c_dbf7_89f2_e0e4_6199ea988b51["processElement()"]
  d580ca1c_dbf7_89f2_e0e4_6199ea988b51 -->|calls| 57d2dc45_0fa0_bba6_c720_eacb54a1ee00
  4ed4ecb1_33ab_6e92_8439_f0a81ee997fa["getBindingAttr()"]
  57d2dc45_0fa0_bba6_c720_eacb54a1ee00 -->|calls| 4ed4ecb1_33ab_6e92_8439_f0a81ee997fa
  12285829_a55a_4d30_e33b_0f5f353d570a["getRawBindingAttr()"]
  57d2dc45_0fa0_bba6_c720_eacb54a1ee00 -->|calls| 12285829_a55a_4d30_e33b_0f5f353d570a
  style 57d2dc45_0fa0_bba6_c720_eacb54a1ee00 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
  }
}