processKey() — vue Function Reference

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

Function typescript TemplateCompiler HTMLParser calls 2 called by 1

Entity Profile

TemplateCompiler→ HTMLParser→ processKey() — vue Function Reference

Dependency Diagram

graph TD
  c2d6f2f2_8d6f_8f78_40fb_493418664b21["processKey()"]
  02a69150_0003_c070_7030_ea511121f64b["processElement()"]
  02a69150_0003_c070_7030_ea511121f64b -->|calls| c2d6f2f2_8d6f_8f78_40fb_493418664b21
  0d1a9a6d_9f27_26ff_a82e_63f0ab50e4ee["getBindingAttr()"]
  c2d6f2f2_8d6f_8f78_40fb_493418664b21 -->|calls| 0d1a9a6d_9f27_26ff_a82e_63f0ab50e4ee
  46289d58_aa41_0928_dc46_0a54bc2499fe["getRawBindingAttr()"]
  c2d6f2f2_8d6f_8f78_40fb_493418664b21 -->|calls| 46289d58_aa41_0928_dc46_0a54bc2499fe
  style c2d6f2f2_8d6f_8f78_40fb_493418664b21 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
  }
}