Vue3 core Typescript class analysis

Different from using JavaScript, writing Vue programs in Typescript requires knowledge of Vue related types. Most of the Vue core types are written in the @vue/runtime-core package.

Vue3 core Typescript class analysis

Different from using JavaScript, writing Vue programs in Typescript requires knowledge of Vue related types. Most of the Vue core types are written in the @vue/runtime-core package.


The Vue page is composed of components. The classes of components in Vue are Componentinherited ComponentOptionsFunctionalComponentand ComponentPublicInstanceConstructor.

Among them, ComponentOptionsinherited ComponentOptionsBaseis the option component of declarative inclusion dataand methodsother attributes that we often write :

FunctionalComponentIs a functional component, ComponentPublicInstanceConstructoris an instance constructor (constructor).

ComponentOptionsInherited ComponentCustomOptions, this interface is empty in the Vue source code. We can use it to customize the attributes in the Vue component options, such as the example in the source code:

declare module '@vue/runtime-core' {
  interface ComponentCustomOptions {
      to: Route,
      from: Route,
      next: () => void
    ): void

The defineComponentfunction we use when defining the component is used to help us make the type declaration of the component option, it accepts ComponentOptionsWithoutPropsComponentOptionsWithArrayPropsor ComponentOptionsWithObjectPropsas an option parameter. They are all inherited ComponentOptionsBase, but have different forms of declaring props. This function can also accept the setup function.

defineComponentFunction returns a DefineComponentclass object, it is ComponentOptionsBaseand ComponentPublicInstanceConstructorthe intersection of class objects:

type DefineComponent = ComponentPublicInstanceConstructor & ComponentOptionsBase && 


In V3, the start of a page is usually from the createAppbeginning, and its type declaration is like this:

export type CreateAppFunction = (
  rootComponent: Component,
  rootProps?: Data | null
) => App

It accepts a Componentsum attribute as a parameter and returns one App.


AppAn instance is a top-level object of Vue, through which you can set shared properties, set plug-ins, register components, set compilation options, set error handling functions, etc.

mountThe root component can be mounted to the document through the method, and an ComponentPublicInstanceobject is returned .


ComponentPublicInstanceIs a component instance, including $el,'$emit'$props Component ComponentPublicInstance`.emit" role="presentation" style="box-sizing: inherit; display: inline; font-style: normal; font-weight: normal; line-height: normal; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; position: relative;" tabindex="0">emit Properties such as props. Vue thought that the template, created

Its type is defined as:

type ComponentPublicInstance<
  P = {}, // props type extracted from props option
  B = {}, // raw bindings returned from setup()
  D = {}, // return from data()
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
  E extends EmitsOptions = {},
  PublicProps = P,
  Defaults = {},
  MakeDefaultsOptional extends boolean = false,
  Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>
> = {
  $: ComponentInternalInstance
  $data: D
  $props: MakeDefaultsOptional extends true
    ? Partial & Omit

: P & PublicProps $attrs: Data $refs: Data $slots: Slots $root: ComponentPublicInstance | null $parent: ComponentPublicInstance | null $emit: EmitFn $el: any $options: Options & MergedComponentOptionsOverride $forceUpdate: () => void $nextTick: typeof nextTick $watch( source: string | Function, cb: Function, options?: WatchOptions ): WatchStopHandle } & P & ShallowUnwrapRef & UnwrapNestedRefs & ExtractComputedReturns & M & ComponentCustomProperties

Among them $optionsis the intersection of the ComponentOptionsBaseclass object (if any, a renderermethod for functional components ) and MergedComponentOptionsOverride (hook function) when we write components .

PShallowUnwrapRefUnwrapNestedRefsExtractComputedReturnsMReading the data component instance attributes and methods can help us to use the this [...] manner.

ComponentCustomPropertiesIt is an empty interface in the source code, and we can use it to customize the attributes on the component instance. Example:

import { Router } from 'vue-router'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router

$Attributes are ComponentInternalInstanceclass objects, representing internal examples of components, including some attributes provided for advanced applications, including VNode.

What's Your Reaction?