Home / Class/ VNode Class — vue Architecture

VNode Class — vue Architecture

Architecture documentation for the VNode class in vnode.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  5ad3a184_20dd_3738_991b_41d3120e21c9["VNode"]
  5164a61d_92b2_9c7f_8acb_b18093afdb59["vnode.ts"]
  5ad3a184_20dd_3738_991b_41d3120e21c9 -->|defined in| 5164a61d_92b2_9c7f_8acb_b18093afdb59
  f0c07912_34fd_4949_f5e2_a0c34105bc77["constructor()"]
  5ad3a184_20dd_3738_991b_41d3120e21c9 -->|method| f0c07912_34fd_4949_f5e2_a0c34105bc77
  7f587824_df08_60d1_c7a1_d38d9cfa6086["child()"]
  5ad3a184_20dd_3738_991b_41d3120e21c9 -->|method| 7f587824_df08_60d1_c7a1_d38d9cfa6086

Relationship Graph

Source Code

src/core/vdom/vnode.ts lines 8–78

export default class VNode {
  tag?: string
  data: VNodeData | undefined
  children?: Array<VNode> | null
  text?: string
  elm: Node | undefined
  ns?: string
  context?: Component // rendered in this component's scope
  key: string | number | undefined
  componentOptions?: VNodeComponentOptions
  componentInstance?: Component // component instance
  parent: VNode | undefined | null // component placeholder node

  // strictly internal
  raw: boolean // contains raw HTML? (server only)
  isStatic: boolean // hoisted static node
  isRootInsert: boolean // necessary for enter transition check
  isComment: boolean // empty comment placeholder?
  isCloned: boolean // is a cloned node?
  isOnce: boolean // is a v-once node?
  asyncFactory?: Function // async component factory function
  asyncMeta: Object | void
  isAsyncPlaceholder: boolean
  ssrContext?: Object | void
  fnContext: Component | void // real context vm for functional nodes
  fnOptions?: ComponentOptions | null // for SSR caching
  devtoolsMeta?: Object | null // used to store functional render context for devtools
  fnScopeId?: string | null // functional scope id support
  isComponentRootElement?: boolean | null // for SSR directives

  constructor(
    tag?: string,
    data?: VNodeData,
    children?: Array<VNode> | null,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child(): Component | void {
    return this.componentInstance
  }
}

Domain

Frequently Asked Questions

What is the VNode class?
VNode is a class in the vue codebase, defined in src/core/vdom/vnode.ts.
Where is VNode defined?
VNode is defined in src/core/vdom/vnode.ts at line 8.

Analyze Your Own Codebase

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

Try Supermodel Free