Creating components with the setup() lifecycle method
Starting from Vue 3.x, the Vue team has introduced the Composition API as a new way to compose Vue components within the setup()
lifecycle method. As mentioned in Chapter 1, Starting Your First Vue Project, setup()
is the first hook the Vue engine will run in a component’s lifecycle before the beforeCreate()
hook. At this point, Vue hasn’t defined a component instance or any component data.
This lifecycle method runs once before the initialization and creation of a component and is part of the Options API. The Vue team has dedicated setup()
to working with Composition API and any custom hooks (composables) written with the Composition API as an alternative approach to creating reactive components besides the Options API.
You can start using the setup()
method with the following syntax:
setup(props, context) { // ... return { //... } }
Setup()
accepts two arguments...