@vue/composition-api

@vue/composition-api

Version 1.7.2
Published 1 year ago
407 kB
No dependencies
MIT license

Install

npm i @vue/composition-api

yarn add @vue/composition-api

pnpm add @vue/composition-api

Overview

Provide logic composition capabilities for Vue.

Index

Variables

h
nextTick
Plugin
version

Classes

EffectScope

Variables

variable h

const h: H;

variable nextTick

const nextTick: Vue$1;

variable Plugin

const Plugin: { install: (Vue: VueConstructor) => void };

variable version

const version: string;

Functions

function computed

computed: {
    <T>(getter: ComputedGetter<T>): ComputedRef<T>;
    <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>;
};

function createApp

createApp: (rootComponent: any, rootProps?: any) => App;

function createRef

createRef: <T>(
    options: RefOption<T>,
    isReadonly?: boolean,
    isComputed?: boolean
) => RefImpl<T>;

function customRef

customRef: <T>(factory: CustomRefFactory<T>) => Ref<T>;

function defineAsyncComponent

defineAsyncComponent: (
    source: AsyncComponentLoader | AsyncComponentOptions
) => AsyncComponent;

function defineComponent

defineComponent: {
    <
        RawBindings,
        D = Data,
        C extends ComputedOptions = {},
        M extends MethodOptions = {},
        Mixin = {},
        Extends = {},
        Emits extends EmitsOptions = {}
    >(
        options: ComponentOptionsWithoutProps<
            {},
            RawBindings,
            D,
            C,
            M,
            Mixin,
            Extends,
            Emits
        >
    ): VueProxy<{}, RawBindings, D, C, M, Mixin, Extends, Emits>;
    <
        PropNames extends string,
        RawBindings = Data,
        D = Data,
        C extends ComputedOptions = {},
        M extends MethodOptions = {},
        Mixin = {},
        Extends = {},
        Emits extends EmitsOptions = {},
        PropsOptions extends ComponentPropsOptions<Data> = ComponentPropsOptions<Data>
    >(
        options: ComponentOptionsWithArrayProps<
            PropNames,
            RawBindings,
            D,
            C,
            M,
            Mixin,
            Extends,
            Emits,
            Readonly<{ [key in PropNames]?: any }>
        >
    ): any;
    <
        Props,
        RawBindings = Data,
        D = Data,
        C extends ComputedOptions = {},
        M extends MethodOptions = {},
        Mixin = {},
        Extends = {},
        Emits extends EmitsOptions = {},
        PropsOptions extends ComponentPropsOptions<Data> = ComponentPropsOptions<Data>
    >(
        options: HasDefined<Props> extends true
            ? ComponentOptionsWithProps<
                  PropsOptions,
                  RawBindings,
                  D,
                  C,
                  M,
                  Mixin,
                  Extends,
                  Emits,
                  Props
              >
            : ComponentOptionsWithProps<
                  PropsOptions,
                  RawBindings,
                  D,
                  C,
                  M,
                  Mixin,
                  Extends,
                  Emits,
                  ExtractPropTypes<PropsOptions>
              >
    ): any;
};

overload 1: object format with no props
overload 2: object format with array props declaration props inferred as { [key in PropNames]?: any }
return type is for Vetur and TSX support
overload 3: object format with object props declaration
see ExtractPropTypes in './componentProps.ts'

function del

del: (target: AnyObject, key: any) => void;

Delete a property and trigger change if necessary.

function effectScope

effectScope: (detached?: boolean) => EffectScope;

function getCurrentInstance

getCurrentInstance: () => ComponentInternalInstance | null;

function getCurrentScope

getCurrentScope: () => EffectScope | undefined;

function inject

inject: {
    <T>(key: InjectionKey<T> | string): T | undefined;
    <T>(
        key: string | InjectionKey<T>,
        defaultValue: T,
        treatDefaultAsFactory?: false
    ): T;
    <T>(
        key: string | InjectionKey<T>,
        defaultValue: T | (() => T),
        treatDefaultAsFactory?: true
    ): T;
};

function isRaw

isRaw: (obj: any) => boolean;

function isReactive

isReactive: (obj: any) => boolean;

function isReadonly

isReadonly: (obj: any) => boolean;

function isRef

isRef: <T>(value: any) => value is Ref<T>;

function markRaw

markRaw: <T extends object>(obj: T) => T;

Make sure obj can't be a reactive

function onActivated

onActivated: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onBeforeMount

onBeforeMount: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onBeforeUnmount

onBeforeUnmount: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onBeforeUpdate

onBeforeUpdate: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onDeactivated

onDeactivated: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onErrorCaptured

onErrorCaptured: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onMounted

onMounted: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onScopeDispose

onScopeDispose: (fn: () => void) => void;

function onServerPrefetch

onServerPrefetch: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onUnmounted

onUnmounted: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function onUpdated

onUpdated: (
    callback: Function,
    target?: ComponentInternalInstance | null | undefined
) => Function | null;

function provide

provide: <T>(key: InjectionKey<T> | string, value: T) => void;

function proxyRefs

proxyRefs: <T extends object>(objectWithRefs: T) => ShallowUnwrapRef<T>;

function reactive

reactive: <T extends object>(obj: T) => UnwrapRef<T>;

Make obj reactivity

function readonly

readonly: <T extends object>(target: T) => DeepReadonly<UnwrapNestedRefs<T>>;

**In @vue/composition-api, reactive only provides type-level readonly check**
Creates a readonly copy of the original object. Note the returned copy is not made reactive, but readonly can be called on an already reactive object.

function ref

ref: {
    <T extends object>(raw: T): T extends Ref ? T : Ref<UnwrapRef<T>>;
    <T>(raw: T): Ref<UnwrapRef<T>>;
    <T = any>(): Ref<T>;
};

function set

set: <T>(target: AnyObject, key: any, val: T) => T;

Set a property on an object. Adds the new property, triggers change notification and intercept it's subsequent access if the property doesn't already exist.

function shallowReactive

shallowReactive: <T extends object = any>(obj: T) => T;

function shallowReadonly

shallowReadonly: <T extends object>(obj: T) => Readonly<T>;

function shallowRef

shallowRef: {
    <T extends object>(value: T): T extends Ref ? T : Ref<T>;
    <T>(value: T): Ref<T>;
    <T = any>(): Ref<T>;
};

function toRaw

toRaw: <T>(observed: T) => T;

function toRef

toRef: <T extends object, K extends keyof T>(object: T, key: K) => Ref<T[K]>;

function toRefs

toRefs: <T extends object>(obj: T) => ToRefs<T>;

function triggerRef

triggerRef: (value: any) => void;

function unref

unref: <T>(ref: T | Ref<T>) => T;

function useAttrs

useAttrs: () => SetupContext['attrs'];

function useCssModule

useCssModule: (name?: string) => Record<string, string>;

function useCSSModule

useCSSModule: (name?: string) => Record<string, string>;

Deprecated
use useCssModule instead.

function useSlots

useSlots: () => SetupContext['slots'];

function warn

warn: (message: string) => void;

Displays a warning message (using console.error) with a stack trace if the function is called inside of active component.
Parameter message
warning message to be displayed

function watch

watch: {
    <
        T extends readonly (object | WatchSource<unknown>)[],
        Immediate extends Readonly<boolean> = false
    >(
        sources: [...T],
        cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
        options?: WatchOptions<Immediate>
    ): WatchStopHandle;
    <
        T extends readonly (object | WatchSource<unknown>)[],
        Immediate extends Readonly<boolean> = false
    >(
        sources: T,
        cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
        options?: WatchOptions<Immediate>
    ): WatchStopHandle;
    <T extends MultiWatchSources, Immediate extends Readonly<boolean> = false>(
        sources: [...T],
        cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
        options?: WatchOptions<Immediate>
    ): WatchStopHandle;
    <T, Immediate extends Readonly<boolean> = false>(
        source: WatchSource<T>,
        cb: WatchCallback<T, Immediate extends true ? T : T>,
        options?: WatchOptions<Immediate>
    ): WatchStopHandle;
    <T extends object, Immediate extends Readonly<boolean> = false>(
        source: T,
        cb: WatchCallback<T, Immediate extends true ? T : T>,
        options?: WatchOptions<Immediate>
    ): WatchStopHandle;
};

function watchEffect

watchEffect: (
    effect: WatchEffect,
    options?: WatchOptionsBase
) => WatchStopHandle;

function watchPostEffect

watchPostEffect: (effect: WatchEffect) => WatchStopHandle;

function watchSyncEffect

watchSyncEffect: (effect: WatchEffect) => WatchStopHandle;

Classes

class EffectScope

class EffectScope extends EffectScopeImpl {}

constructor

constructor(detached?: boolean);

Interfaces

interface App

interface App<T = any> {}

property component

component: VueConstructor['component'];

property config

config: VueConstructor['config'];

property mixin

mixin: VueConstructor['mixin'];

property mount

mount: Vue$1['$mount'];

property unmount

unmount: Vue$1['$destroy'];

property use

use: VueConstructor['use'];

method directive

directive: {
    (name: string): Directive | undefined;
    (name: string, directive: Directive<any, any>): this;
};

method provide

provide: <T>(key: InjectionKey<T> | symbol | string, value: T) => this;

interface ComponentInternalInstance

interface ComponentInternalInstance {}

We expose a subset of properties on the internal instance as they are useful for advanced external libraries and tools.

property attrs

attrs: Data;

property data

data: Data;

property emit

emit: EmitFn;

property emitted

emitted: Record<string, boolean> | null;

property isDeactivated

isDeactivated: boolean;

property isMounted

isMounted: boolean;

property isUnmounted

isUnmounted: boolean;

property parent

parent: ComponentInternalInstance | null;

property props

props: Data;

property proxy

proxy: ComponentInstance;

property refs

refs: Data;

property root

root: ComponentInternalInstance;

property slots

slots: InternalSlots;

property type

type: Record<string, unknown>;

property uid

uid: number;

property update

update: Function;

The reactive effect for rendering and patching the component. Callable.

property vnode

vnode: VNode;

Vnode representing this component in its parent's vdom tree

interface ComputedRef

interface ComputedRef<T = any> extends WritableComputedRef<T> {}

property value

readonly value: T;

interface DirectiveBinding

interface DirectiveBinding<V> extends Readonly<VNodeDirective> {}

property modifiers

readonly modifiers: DirectiveModifiers;

property oldValue

readonly oldValue: V | null;

property value

readonly value: V;

interface InjectionKey

interface InjectionKey<T> extends Symbol {}

interface MethodOptions

interface MethodOptions {}

index signature

[key: string]: Function;

interface ObjectDirective

interface ObjectDirective<T = any, V = any> {}

property bind

bind?: DirectiveHook<T, any, V>;

property componentUpdated

componentUpdated?: DirectiveHook<T, any, V>;

property inserted

inserted?: DirectiveHook<T, any, V>;

property unbind

unbind?: DirectiveHook<T, any, V>;

property update

update?: DirectiveHook<T, any, V>;

interface PropOptions

interface PropOptions<T = any, D = T> {}

property default

default?: D | DefaultFactory<D> | null | undefined | object;

property required

required?: boolean;

property type

type?: PropType<T> | true | null;

method validator

validator: (value: unknown) => boolean;

interface Ref

interface Ref<T = any> {}

property [_refBrand]

readonly [_refBrand]: true;

property value

value: T;

interface SetupContext

interface SetupContext<E extends EmitsOptions = {}> {}

property attrs

attrs: Data;

property emit

emit: EmitFn<E>;

property expose

expose: (exposed?: Record<string, any>) => void;

Deprecated
not available in Vue 2

property listeners

readonly listeners: {
    [key in string]?: Function;
};

Deprecated
not available in Vue 3

property parent

readonly parent: ComponentInstance | null;

Deprecated
not available in Vue 3

property refs

readonly refs: {
    [key: string]: Vue | Element | Vue[] | Element[];
};

Deprecated
not available in Vue 3

property root

readonly root: ComponentInstance;

Deprecated
not available in Vue 3

property slots

slots: Slots;

interface VueWatcher

interface VueWatcher {}

property lazy

lazy: boolean;

property value

value: any;

method get

get: () => any;

method run

run: () => void;

method teardown

teardown: () => void;

interface WatchOptions

interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {}

property deep

deep?: boolean;

property immediate

immediate?: Immediate;

interface WatchOptionsBase

interface WatchOptionsBase {}

property flush

flush?: FlushMode;

interface WritableComputedOptions

interface WritableComputedOptions<T> {}

property get

get: ComputedGetter<T>;

property set

set: ComputedSetter<T>;

interface WritableComputedRef

interface WritableComputedRef<T> extends Ref<T> {}

property effect

effect: true;

effect is added to be able to differentiate refs from computed properties. **Differently from Vue 3, it's just true**. This is because there is no equivalent of ReactiveEffect<T> in @vue/composition-api.

Type Aliases

type ComponentInstance

type ComponentInstance = InstanceType<VueConstructor>;

type ComponentPropsOptions

type ComponentPropsOptions<P = Data> = ComponentObjectPropsOptions<P> | string[];

type ComponentPublicInstance

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
> = {
    $: ComponentInternalInstance;
    $data: D;
    $props: MakeDefaultsOptional extends true
        ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
        : P & PublicProps;
    $attrs: Data;
    $refs: Data;
    $slots: Slots;
    $root: ComponentPublicInstance | null;
    $parent: ComponentPublicInstance | null;
    $emit: EmitFn<E>;
    $el: any;
    $forceUpdate: () => void;
    $nextTick: typeof nextTick;
    $watch(
        source: string | Function,
        cb: Function,
        options?: WatchOptions
    ): WatchStopHandle;
} & P &
    ShallowUnwrapRef<B> &
    UnwrapNestedRefs<D> &
    ExtractComputedReturns<C> &
    M;

type ComponentRenderProxy

type ComponentRenderProxy<
    P = {}, // props type extracted from props option
    B = {}, // raw bindings returned from setup()
    D = {}, // return from data()
    C extends ComputedOptions = {},
    M extends MethodOptions = {},
    Mixin = {},
    Extends = {},
    Emits extends EmitsOptions = {},
    PublicProps = P,
    Defaults = {},
    MakeDefaultsOptional extends boolean = false
> = {
    $data: D;
    $props: Readonly<
        MakeDefaultsOptional extends true
            ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
            : P & PublicProps
    >;
    $attrs: Record<string, string>;
    $emit: ComponentRenderEmitFn<
        Emits,
        keyof Emits,
        ComponentRenderProxy<
            P,
            B,
            D,
            C,
            M,
            Mixin,
            Extends,
            Emits,
            PublicProps,
            Defaults,
            MakeDefaultsOptional
        >
    >;
} & Readonly<P> &
    ShallowUnwrapRef<B> &
    D &
    M &
    ExtractComputedReturns<C> &
    Omit<Vue$1, '$data' | '$props' | '$attrs' | '$emit'>;

type ComputedGetter

type ComputedGetter<T> = (ctx?: any) => T;

type ComputedOptions

type ComputedOptions = Record<
    string,
    ComputedGetter$1<any> | WritableComputedOptions$1<any>
>;

type ComputedSetter

type ComputedSetter<T> = (v: T) => void;

type Data

type Data = {
    [key: string]: unknown;
};

type DeepReadonly

type DeepReadonly<T> = T extends Builtin
    ? T
    : T extends Map<infer K, infer V>
    ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
    : T extends ReadonlyMap<infer K, infer V>
    ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
    : T extends WeakMap<infer K, infer V>
    ? WeakMap<DeepReadonly<K>, DeepReadonly<V>>
    : T extends Set<infer U>
    ? ReadonlySet<DeepReadonly<U>>
    : T extends ReadonlySet<infer U>
    ? ReadonlySet<DeepReadonly<U>>
    : T extends WeakSet<infer U>
    ? WeakSet<DeepReadonly<U>>
    : T extends Promise<infer U>
    ? Promise<DeepReadonly<U>>
    : T extends {}
    ? {
          readonly [K in keyof T]: DeepReadonly<T[K]>;
      }
    : Readonly<T>;

type Directive

type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>;

type DirectiveHook

type DirectiveHook<T = any, Prev = VNode | null, V = any> = (
    el: T,
    binding: DirectiveBinding<V>,
    vnode: VNode,
    prevVNode: Prev
) => void;

type DirectiveModifiers

type DirectiveModifiers = Record<string, boolean>;

type ExtractDefaultPropTypes

type ExtractDefaultPropTypes<O> = O extends object
    ? {
          [K in keyof Pick<O, DefaultKeys<O>>]: InferPropType<O[K]>;
      }
    : {};

type ExtractPropTypes

type ExtractPropTypes<O> = {
    [K in keyof Pick<O, RequiredKeys<O>>]: InferPropType<O[K]>;
} & {
    [K in keyof Pick<O, OptionalKeys<O>>]?: InferPropType<O[K]>;
};

type FlushMode

type FlushMode = 'pre' | 'post' | 'sync';

type FunctionDirective

type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>;

type PropType

type PropType<T> = PropConstructor<T> | PropConstructor<T>[];

type SetupFunction

type SetupFunction<Props, RawBindings = {}, Emits extends EmitsOptions = {}> = (
    this: void,
    props: Readonly<Props>,
    ctx: SetupContext<Emits>
) => RawBindings | (() => VNode | null) | void;

type ShallowUnwrapRef

type ShallowUnwrapRef<T> = {
    [K in keyof T]: T[K] extends Ref<infer V> ? V : T[K];
};

type ToRefs

type ToRefs<T = any> = {
    [K in keyof T]: Ref<T[K]>;
};

type UnwrapNestedRefs

type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;

type UnwrapRef

type UnwrapRef<T> = T extends Ref<infer V> ? UnwrapRefSimple<V> : UnwrapRefSimple<T>;

type UnwrapRefSimple

type UnwrapRefSimple<T> = T extends Function | CollectionTypes | BaseTypes | Ref
    ? T
    : T extends Array<any>
    ? {
          [K in keyof T]: UnwrapRefSimple<T[K]>;
      }
    : T extends object
    ? {
          [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>;
      }
    : T;

type WatchCallback

type WatchCallback<V = any, OV = any> = (
    value: V,
    oldValue: OV,
    onInvalidate: InvalidateCbRegistrator
) => any;

type WatchEffect

type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void;

type WatchSource

type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);

type WatchStopHandle

type WatchStopHandle = () => void;

Package Files (1)

dist/vue-composition-api.d.ts

Dependencies (0)

No dependencies.

Peer Dependencies (1)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@vue/composition-api.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@vue/composition-api)

HTML

<a href="https://www.jsdocs.io/package/@vue/composition-api"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 3872 ms.
Missing or incorrect documentation? Open an issue for this package.

@vue/composition-api

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable h

variable nextTick

variable Plugin

variable version

Functions

function computed

function createApp

function createRef

function customRef

function defineAsyncComponent

function defineComponent

function del

function effectScope

function getCurrentInstance

function getCurrentScope

function inject

function isRaw

function isReactive

function isReadonly

function isRef

function markRaw

function onActivated

function onBeforeMount

function onBeforeUnmount

function onBeforeUpdate

function onDeactivated

function onErrorCaptured

function onMounted

function onScopeDispose

function onServerPrefetch

function onUnmounted

function onUpdated

function provide

function proxyRefs

function reactive

function readonly

function ref

function set

function shallowReactive

function shallowReadonly

function shallowRef

function toRaw

function toRef

function toRefs

function triggerRef

function unref

function useAttrs

function useCssModule

function useCSSModule

Deprecated

function useSlots

function warn

Parameter message

function watch

function watchEffect

function watchPostEffect

function watchSyncEffect

Classes

class EffectScope

constructor

Interfaces

interface App

property component

property config

property mixin

property mount

property unmount

property use

method directive

method provide