Options: State | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
A function that returns the initial reactive state for the component instance.
The function is expected to return a plain JavaScript object, which will be made reactive by Vue. After the instance is created, the reactive data object can be accessed as this.$data. The component instance also proxies all the properties found on the data object, so this.a will be equivalent to this.$data.a.
All top-level data properties must be included in the returned data object. Adding new properties to this.$data is possible, but it is not recommended. If the desired value of a property is not yet available then an empty value such as undefined or null should be included as a placeholder to ensure that Vue knows that the property exists.
Properties that start with _ or $ will not be proxied on the component instance because they may conflict with Vue's internal properties and API methods. You will have to access them as this.$data._property.
It is not recommended to return objects with their own stateful behavior like browser API objects and prototype properties. The returned object should ideally be a plain object that only represents the state of the component.
Note that if you use an arrow function with the data property, this won't be the component's instance, but you can still access the instance as the function's first argument:
See also Reactivity in Depth
Declare the props of a component.
Types are simplified for readability.
In Vue, all component props need to be explicitly declared. Component props can be declared in two forms:
With object-based syntax, each prop can further define the following options:
type: Can be one of the following native constructors: String, Number, Boolean, Array, Object, Date, Function, Symbol, any custom constructor function or an array of those. In development mode, Vue will check if a prop's value matches the declared type, and will throw a warning if it doesn't. See Prop Validation for more details.
Also note that a prop with Boolean type affects its value casting behavior in both development and production. See Boolean Casting for more details.
default: Specifies a default value for the prop when it is not passed by the parent or has undefined value. Object or array defaults must be returned using a factory function. The factory function also receives the raw props object as the argument.
required: Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.
validator: Custom validator function that takes the prop value and props object as arguments. In development mode, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails).
Object declaration with validations:
Declare computed properties to be exposed on the component instance.
The option accepts an object where the key is the name of the computed property, and the value is either a computed getter, or an object with get and set methods (for writable computed properties).
All getters and setters have their this context automatically bound to the component instance.
Note that if you use an arrow function with a computed property, this won't point to the component's instance, but you can still access the instance as the function's first argument:
Declare methods to be mixed into the component instance.
Declared methods can be directly accessed on the component instance, or used in template expressions. All methods have their this context automatically bound to the component instance, even when passed around.
Avoid using arrow functions when declaring methods, as they will not have access to the component instance via this.
See also Event Handling
Declare watch callbacks to be invoked on data change.
Types are simplified for readability.
The watch option expects an object where keys are the reactive component instance properties to watch (e.g. properties declared via data or computed) — and values are the corresponding callbacks. The callback receives the new value and the old value of the watched source.
In addition to a root-level property, the key can also be a simple dot-delimited path, e.g. a.b.c. Note that this usage does not support complex expressions - only dot-delimited paths are supported. If you need to watch complex data sources, use the imperative $watch() API instead.
The value can also be a string of a method name (declared via methods), or an object that contains additional options. When using the object syntax, the callback should be declared under the handler field. Additional options include:
Avoid using arrow functions when declaring watch callbacks as they will not have access to the component instance via this.
Declare the custom events emitted by the component.
Emitted events can be declared in two forms: