repository·main·Indexed 26 days ago
https://github.com/vuejs/composition-apiA plugin that brings the Vue 3 Composition API to Vue 2.6 and earlier versions, allowing developers to use modern reactive patterns and composition logic in older Vue environments. It provides the reactivity API (reactive, ref, readonly), lifecycle hooks, effect scope management, and type-safe component definitions via defineComponent.
To use the Composition API in a Vue 2 project, you must install it as a plugin using Vue.use(). This enables the setup() function and integrates the reactivity system with Vue 2's component lifecycle.
Note: This plugin is specifically designed for Vue 2. It will trigger a warning if used with a version of Vue other than 2.x.
Use defineComponent to define Vue components with full TypeScript type inference. It supports three main declaration formats:
any types (useful for Vetur and TSX support).ExtractPropTypes).The function returns a VueProxy which provides type safety for data, computed properties, methods, and props.
The Ref API provides functions to create reactive references (wrappers for single values) and utilities to manage them.
ref(value): Creates a reactive ref object.customRef(factory): Creates a ref with a custom implementation of getter/setter.isRef(value): Returns true if the value is a ref.createRef(): Creates a non-reactive ref (useful for template refs).toRefs(reactiveObject): Converts a reactive object into an object of refs, where each property is a ref pointing to the corresponding property of the original object.toRef(object, key): Creates a ref from a single property of a reactive object.unref(value): Returns the value of a ref if it is a ref, otherwise returns the value itself.shallowRef(value): Creates a ref that only tracks the .value property itself, not the contents of the value.triggerRef(ref): Manually triggers updates for a shallowRef.proxyRefs(object): Returns a proxy of an object where all properties are refs.markRaw(obj) to mark an object so that it can no longer be converted into a reactive proxy. This is useful for objects that should remain 'raw' and not be tracked by the reactivity system (e.g., large third-party instances or complex data structures).shallowReadonly(obj) to create a read-only proxy that only protects the top-level properties of the object. Nested objects within the proxy remain mutable. This is useful for performance when deep reactivity is not required.The useCssModule hook allows you to access the CSS modules object (typically $style) within a component's setup() function.
By default, it looks for a property named $style on the component instance. You can provide a custom name if your CSS module property is named differently.
Requirements:
setup() function of a component.createApp to initialize a new Vue application instance. This is the primary entry point for starting an application using the Composition API.toRefs() to convert a reactive object into a plain object where each property is a Ref. This is commonly used when destructuring reactive state while maintaining reactivity. Use toRef() to convert a single specific property of an object into a Ref.toRaw(observed) to retrieve the original, non-proxied object from a reactive proxy. This is useful when you need to pass a reactive object to a third-party library that expects a plain object.isReadonly(obj) to determine if an object was created using the readonly or shallowReadonly functions.unref() to safely get the value of a Ref. If the passed argument is a Ref, it returns the .value; otherwise, it returns the argument itself.shallowReactive(obj) to create a reactive proxy where only the top-level properties are reactive. Changes to nested objects will not trigger reactivity updates. This is useful for performance optimization when deep reactivity is not required.