Vue3 Options API

The following APIs are widely used in Vue's Options API to manage state, lifecycle, slots, dependency injection, and other features.

1. State Options

No. API & Description Example
1 data
The data option of a component, used to define the component's state.		 data() { return { count: 0 }; }
2 props
The props option of a component, defining the data passed from a parent component to a child component.		 props: { msg: String }
3 computed
Computed properties, used to define derived values based on component state (data, props).		 computed: { doubledCount() { return this.count * 2; } }
4 methods
The methods option of a component, used to define the component's business logic.		 methods: { increment() { this.count += 1; } }
5 watch
Listen to changes in the component's reactive data and execute callbacks.		 watch: { count(newVal) { console.log(newVal); } }
6 emits
Define custom events that the component can emit.		 emits: ['update']
7 expose
Properties or methods explicitly exposed for access by the parent component.		 expose() { return { method } }

2. Render Options

No. API & Description Example
1 template
Define the component's HTML template.		 <template><button @click="increment">{{ count }}</button></template>
2 render
Use a render function instead of a template.		 render(h) { return h('button', { on: { click: this.increment } }, this.count) }
3 compilerOptions
Configure options for the template compiler.		 compilerOptions: { delimiters: ['{{', '}}'] }
4 slots
Define the component's slots.		 <slot></slot>

3. Lifecycle Options

No. API & Description Example
1 beforeCreate
Called before the component is instantiated.		 beforeCreate() { console.log('Before Create') }
2 created
Called after the component instance has been created, with data already set up.		 created() { console.log('Created') }
3 beforeMount
Called before mounting to the DOM, with the template already compiled.		 beforeMount() { console.log('Before Mount') }
4 mounted
Called after the component is mounted to the DOM.		 mounted() { console.log('Mounted') }
5 beforeUpdate
Called after data changes and before the component re-renders.		 beforeUpdate() { console.log('Before Update') }
6 updated
Called after the component update is completed.		 updated() { console.log('Updated') }
7 beforeUnmount
Called before the component is unmounted.		 beforeUnmount() { console.log('Before Unmount') }
8 unmounted
Called after the component is unmounted.		 unmounted() { console.log('Unmounted') }
9 errorCaptured
Called when errors from child components are captured.		 errorCaptured(err, vm, info) { console.error(err) }
10 renderTracked
Called when reactive data changes and triggers re-rendering.		 renderTracked(event) { console.log('Render Tracked') }
11 renderTriggered
Called when reactive data triggers re-rendering.		 renderTriggered(event) { console.log('Render Triggered') }
12 activated
Called when the component is activated (only forkeep-alivecomponents).		 activated() { console.log('Activated') }
13 deactivated
Called when the component is deactivated (only forkeep-alivecomponents).		 deactivated() { console.log('Deactivated') }
14 serverPrefetch
A hook for fetching data during server-side rendering.		 serverPrefetch() { return fetchData() }

4. Composition Options

No. API & Description Example
1 provide
Provide dependencies to descendant components.		 provide('key', 'value')
2 inject
Inject dependencies from ancestor components.		 inject('key')
3 mixins
Introduce external mixins to reuse logic.		 mixins: [myMixin]
4 extends
The component extends another component's options.		 extends: MyComponent

5. Other Miscellaneous

No. API & Description Example
1 name
The name of the component, usually used for debugging.		 name: 'MyComponent'
2 inheritAttrs
Controls whether attributes (attrs) from the parent component are automatically inherited by the root element.		 inheritAttrs: false
3 components
Register local components so they can be used in the current component.		 components: { LocalComponent }
4 directives
Register local directives so they can be used in the current component.		 directives: { focus: FocusDirective }

6. Component Instance

No. API & Description Example
1 $data
Get the component's data object.		 this.$data.count
2 $props
Get the component's props object.		 this.$props.msg
3 $el
Get the DOM element the component is mounted to.		 this.$el
4 $options
Get the component's configuration options.		 this.$options.name
5 $parent
Get the parent component's instance.		 this.$parent
6 $root
Get the root component's instance.		 this.$root
7 $slots
Get the component's slot content.		 this.$slots.default
8 $refs
Get the component's reference object.		 this.$refs.input
9 $attrs
Get all attributes not bound to the component's props.		 this.$attrs
10 $watch()
Watch the reactive data or computed properties of the component instance.		 this.$watch('count', (newCount) => { console.log(newCount) })
11 $emit()
Emit a custom event.		 this.$emit('update', newVal)
12 $forceUpdate()
Force Vue to re-render the component.		 this.$forceUpdate()
13 $nextTick()
Execute a callback after the next DOM update cycle ends.		 this.$nextTick(() => { console.log('DOM updated') })
Other Extensions