vue Architecture Docs
Home / File/ template-ref.ts — vue Source File

template-ref.ts — vue Source File

Architecture documentation for template-ref.ts, a typescript file in the vue codebase. 4 imports, 2 dependents.

File typescript CoreRuntime Observer 4 imports 2 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  ceeb9b13_34d7_177d_f00f_e9f463e6ebb5["template-ref.ts"]
  8a5fb776_a8f4_ce8a_8549_67af07f2e1e9["util"]
  ceeb9b13_34d7_177d_f00f_e9f463e6ebb5 --> 8a5fb776_a8f4_ce8a_8549_67af07f2e1e9
  81ed4f13_7d68_6e21_7425_cf978f68576f["vnode"]
  ceeb9b13_34d7_177d_f00f_e9f463e6ebb5 --> 81ed4f13_7d68_6e21_7425_cf978f68576f
  907f4994_ea28_43b1_7976_0db9f0e97637["component"]
  ceeb9b13_34d7_177d_f00f_e9f463e6ebb5 --> 907f4994_ea28_43b1_7976_0db9f0e97637
  6a13c450_be5a_326d_7e2d_c1d429be7e83["v3"]
  ceeb9b13_34d7_177d_f00f_e9f463e6ebb5 --> 6a13c450_be5a_326d_7e2d_c1d429be7e83
  0387bca1_38ba_3c61_9c03_1478ecbafd5f["index.ts"]
  0387bca1_38ba_3c61_9c03_1478ecbafd5f --> ceeb9b13_34d7_177d_f00f_e9f463e6ebb5
  0df06241_48e0_316d_48c2_6f91c7a049b1["patch.ts"]
  0df06241_48e0_316d_48c2_6f91c7a049b1 --> ceeb9b13_34d7_177d_f00f_e9f463e6ebb5
  style ceeb9b13_34d7_177d_f00f_e9f463e6ebb5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  remove,
  isDef,
  hasOwn,
  isArray,
  isFunction,
  invokeWithErrorHandling,
  warn
} from 'core/util'
import type { VNodeWithData } from 'types/vnode'
import { Component } from 'types/component'
import { isRef } from 'v3'

export default {
  create(_: any, vnode: VNodeWithData) {
    registerRef(vnode)
  },
  update(oldVnode: VNodeWithData, vnode: VNodeWithData) {
    if (oldVnode.data.ref !== vnode.data.ref) {
      registerRef(oldVnode, true)
      registerRef(vnode)
    }
  },
  destroy(vnode: VNodeWithData) {
    registerRef(vnode, true)
  }
}

export function registerRef(vnode: VNodeWithData, isRemoval?: boolean) {
  const ref = vnode.data.ref
  if (!isDef(ref)) return

  const vm = vnode.context
  const refValue = vnode.componentInstance || vnode.elm
  const value = isRemoval ? null : refValue
  const $refsValue = isRemoval ? undefined : refValue

  if (isFunction(ref)) {
    invokeWithErrorHandling(ref, vm, [value], vm, `template ref function`)
    return
  }

  const isFor = vnode.data.refInFor
  const _isString = typeof ref === 'string' || typeof ref === 'number'
  const _isRef = isRef(ref)
  const refs = vm.$refs

  if (_isString || _isRef) {
    if (isFor) {
      const existing = _isString ? refs[ref] : ref.value
      if (isRemoval) {
        isArray(existing) && remove(existing, refValue)
      } else {
        if (!isArray(existing)) {
          if (_isString) {
            refs[ref] = [refValue]
            setSetupRef(vm, ref, refs[ref])
          } else {
            ref.value = [refValue]
          }
        } else if (!existing.includes(refValue)) {
          existing.push(refValue)
        }
      }
    } else if (_isString) {
      if (isRemoval && refs[ref] !== refValue) {
        return
      }
      refs[ref] = $refsValue
      setSetupRef(vm, ref, value)
    } else if (_isRef) {
      if (isRemoval && ref.value !== refValue) {
        return
      }
      ref.value = value
    } else if (__DEV__) {
      warn(`Invalid template ref type: ${typeof ref}`)
    }
  }
}

function setSetupRef(
  { _setupState }: Component,
  key: string | number,
  val: any
) {
  if (_setupState && hasOwn(_setupState, key as string)) {
    if (isRef(_setupState[key])) {
      _setupState[key].value = val
    } else {
      _setupState[key] = val
    }
  }
}

Domain

Subdomains

Functions

Dependencies

  • component
  • util
  • v3
  • vnode

Imported By

Source

Frequently Asked Questions

What does template-ref.ts do?
template-ref.ts is a source file in the vue codebase, written in typescript. It belongs to the CoreRuntime domain, Observer subdomain.
What functions are defined in template-ref.ts?
template-ref.ts defines 5 function(s): default.create, default.destroy, default.update, registerRef, setSetupRef.
What does template-ref.ts depend on?
template-ref.ts imports 4 module(s): component, util, v3, vnode.
What files import template-ref.ts?
template-ref.ts is imported by 2 file(s): index.ts, patch.ts.
Where is template-ref.ts in the architecture?
template-ref.ts is located at src/core/vdom/modules/template-ref.ts (domain: CoreRuntime, subdomain: Observer, directory: src/core/vdom/modules).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free