Composition API: setup() | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
The setup() hook serves as the entry point for Composition API usage in components in the following cases:
If you are using Composition API with Single-File Components, <script setup> is strongly recommended for a more succinct and ergonomic syntax.
We can declare reactive state using Reactivity APIs and expose them to the template by returning an object from setup(). The properties on the returned object will also be made available on the component instance (if other options are used):
refs returned from setup are automatically shallow unwrapped when accessed in the template so you do not need to use .value when accessing them. They are also unwrapped in the same way when accessed on this.
setup() itself does not have access to the component instance - this will have a value of undefined inside setup(). You can access Composition-API-exposed values from Options API, but not the other way around.
setup() should return an object synchronously. The only case when async setup() can be used is when the component is a descendant of a Suspense component.
The first argument in the setup function is the props argument. Just as you would expect in a standard component, props inside of a setup function are reactive and will be updated when new props are passed in.
Note that if you destructure the props object, the destructured variables will lose reactivity. It is therefore recommended to always access props in the form of props.xxx.
If you really need to destructure the props, or need to pass a prop into an external function while retaining reactivity, you can do so with the toRefs() and toRef() utility APIs:
The second argument passed to the setup function is a Setup Context object. The context object exposes other values that may be useful inside setup:
The context object is not reactive and can be safely destructured:
attrs and slots are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as attrs.x or slots.x. Also note that, unlike props, the properties of attrs and slots are not reactive. If you intend to apply side effects based on changes to attrs or slots, you should do so inside an onBeforeUpdate lifecycle hook.
expose is a function that can be used to explicitly limit the properties exposed when the component instance is accessed by a parent component via template refs:
setup can also return a render function which can directly make use of the reactive state declared in the same scope:
Returning a render function prevents us from returning anything else. Internally that shouldn't be a problem, but it can be problematic if we want to expose methods of this component to the parent component via template refs.
We can solve this problem by calling expose():
The increment method would then be available in the parent component via a template ref.
Edit this page on GitHub