processKey() — vue Function Reference

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

Function typescript VueCore GlobalAPI calls 2 called by 1

Entity Profile

VueCore→ GlobalAPI→ processKey() — vue Function Reference

Dependency Diagram

graph TD
  57a516a9_e062_716c_5949_3b536edc5b7b["processKey()"]
  101d3d34_ac07_228f_62b9_5d5ac4a0ea2e["index.ts"]
  57a516a9_e062_716c_5949_3b536edc5b7b -->|defined in| 101d3d34_ac07_228f_62b9_5d5ac4a0ea2e
  08093d1f_a003_dbad_063e_2431482be94f["processElement()"]
  08093d1f_a003_dbad_063e_2431482be94f -->|calls| 57a516a9_e062_716c_5949_3b536edc5b7b
  58594d31_46d6_b10c_c378_911111359052["getBindingAttr()"]
  57a516a9_e062_716c_5949_3b536edc5b7b -->|calls| 58594d31_46d6_b10c_c378_911111359052
  f53a6d5d_35db_c75d_12ae_df402776a846["getRawBindingAttr()"]
  57a516a9_e062_716c_5949_3b536edc5b7b -->|calls| f53a6d5d_35db_c75d_12ae_df402776a846
  style 57a516a9_e062_716c_5949_3b536edc5b7b 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
  }
}