Options API definition
Vue components are defined using objects where the properties of these component objects are known as options. Components can be written in two styles: one uses the Composition API in conjunction with setup (either via a setup() option or <script setup>), the other makes very little direct use of the Composition API and instead uses various component options. The component options used in this way are referred to as the Options API. The Options API includes options such as data(), computed, methods, and created().
Options API shared options
Some options such as props, emits, and inheritAttrs can be used when authoring components with either API. As they are component options, they could be considered part of the Options API. However, as these options are also used in conjunction with setup(), it is usually more useful to think of them as shared between the two component styles.
setup function and Options API
The setup() function itself is a component option and could be described as part of the Options API. However, this is not how the term Options API is normally used. Instead, the setup() function is considered to be part of Composition API.
Create stateful methods in created() lifecycle hook
To keep each component instance's stateful methods independent, create the stateful version in the created() lifecycle hook. This ensures each instance has its own copy. Also consider calling cancel() in the unmounted() hook if the method supports it.
Vue automatically binds methods to component instance
Vue automatically binds the this value for methods so that it always refers to the component instance. This ensures a method retains the correct this value when used as an event listener or callback.
Avoid arrow functions when declaring methods
You should avoid using arrow functions when defining methods in the methods option because arrow functions prevent Vue from binding the appropriate this value.
Stateful methods problem in reusable components
When dynamically creating stateful method functions like debounced handlers, if multiple component instances share the same function, they interfere with one another because the function maintains internal state.
$watch() option details
For $watch, the immediate option triggers the callback immediately on watcher creation with the old value being undefined on the first call. The deep option forces deep traversal of the source if it is an object, so the callback fires on deep mutations. The flush option adjusts the callback's flush timing. The onTrack and onTrigger options debug the watcher's dependencies.
$watch() property name example
Watch a property name with $watch: this.$watch('a', (newVal, oldVal) => {})
$watch() dot-delimited path example
Watch a dot-delimited path with $watch: this.$watch('a.b', (newVal, oldVal) => {})
$watch() getter function example
Using getter function with $watch for complex expressions: this.$watch(() => this.a + this.b, (newVal, oldVal) => {}). Every time the expression yields a different result, the handler will be called.
$watch() stopping the watcher example
Stop a watcher created with $watch: const unwatch = this.$watch('a', cb); later call unwatch() to stop watching.
$forceUpdate() method
$forceUpdate forces the component instance to re-render. Signature: $forceUpdate(): void. This should be rarely needed given Vue's fully automatic reactivity system. The only cases where you may need it is when you have explicitly created non-reactive component state using advanced reactivity APIs.
$nextTick() method signature
$nextTick is an instance-bound version of the global nextTick(). Signature: $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>. The only difference from the global version is that the callback passed to this.$nextTick() will have its this context bound to the current component instance.
Component public instance properties are readonly
All properties listed on the component instance (such as $data, $props, $el, $options, $parent, $root, $slots, $refs, $attrs) are readonly except for nested properties in $data.
$data property
$data is the object returned from the data option, made reactive by the component. The component instance proxies access to the properties on its data object. Type: object. This property is readonly except for nested properties within $data.
$options property and merging
$options is the resolved component options used for instantiating the current component instance. Type: ComponentOptions. The $options object exposes the resolved options for the current component and is the merge result of global mixins, component extends base, and component mixins. It is typically used to support custom component options.
$options custom option example
Custom component options can be accessed via this.$options. Example: const app = createApp({ customOption: 'foo', created() { console.log(this.$options.customOption) // => 'foo' } })
$watch() method signature and options
$watch is an imperative API for creating watchers. Signature: $watch(source: string | (() => any), callback: WatchCallback, options?: WatchOptions): StopHandle. The first argument is the watch source, which can be a component property name string, a dot-delimited path string, or a getter function. The second argument is the callback function. WatchCallback type: (value: T, oldValue: T, onCleanup: (cleanupFn: () => void) => void) => void. WatchOptions properties: immediate (boolean, default: false), deep (boolean, default: false), flush ('pre' | 'post' | 'sync', default: 'pre'), onTrack ((event: DebuggerEvent) => void), onTrigger ((event: DebuggerEvent) => void). StopHandle type: () => void.