Skip to main content

​
data

​
data
(this: ComponentPublicInstance) => object
A function that returns the initial reactive state for the component instance.The function will be called with the component instance as this. The returned object will be made reactive by Vue. After instantiation, 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, 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.Example:
export default {
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },
  mounted() {
    console.log(this.count) // 0
    this.count = 1
  }
}

​
props

​
props
Array<string> | Object
Declare the props that the component accepts.Props can be declared in two forms:
  • Simple form using an array of strings
  • Full form using an object where each property key is the name of the prop, and the value is the prop’s type (a constructor function) or advanced options
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, or a custom constructor function. 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.
  • 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 from 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 as the sole argument. In development mode, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails).
Example:
// Simple declaration
export default {
  props: ['size', 'myMessage']
}

// Object declaration with validation
export default {
  props: {
    // type check
    height: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: (value) => {
        return value >= 0
      }
    }
  }
}

​
computed

​
computed
{ [key: string]: Function | { get: Function, set: Function } }
Declare computed properties to be exposed on the component instance.Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as the dependencies haven’t changed, multiple accesses to the computed property will immediately return the previously computed result without having to run the function again.The option accepts an object where the key is the name of the computed property, and the value is either:
  • A function (used as getter)
  • An object with get and set methods (for a writable computed property)
All getters and setters have their this context automatically bound to the component instance.Example:
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    // getter only
    fullName() {
      return this.firstName + ' ' + this.lastName
    },
    // both getter and setter
    fullNameWithSetter: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(newValue) {
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

​
methods

​
methods
{ [key: string]: Function }
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.Example:
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  mounted() {
    // methods can be called in lifecycle hooks, or other methods
    this.increment()
  }
}

​
watch

​
watch
{ [key: string]: string | Function | Object | Array }
Declare watch callbacks to be invoked on data change.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, or an Object that contains additional options. When using the object syntax, the callback should be declared under the handler field. Additional options include:
  • immediate: trigger the callback immediately on watcher creation. Old value will be undefined on the first call.
  • deep: force deep traversal of the source if it is an object or an array, so that the callback fires on deep mutations. See Deep Watchers.
  • flush: adjust the callback’s flush timing. See Callback Flush Timing.
  • onTrack / onTrigger: debug the watcher’s dependencies. See Watcher Debugging.
Avoid using arrow functions when declaring watch callbacks as they will not have access to the component instance via this.Example:
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // watching top-level property
    a(newVal, oldVal) {
      console.log(`new: ${newVal}, old: ${oldVal}`)
    },
    // string method name
    b: 'someMethod',
    // the callback will be called whenever any of the watched object properties change
    c: {
      handler(newVal, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // watching a single nested property
    'c.d': function (newVal, oldVal) {
      // do something
    },
    // the callback will be called immediately after the start of the observation
    e: {
      handler(newVal, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // you can pass an array of callbacks, they will be called one-by-one
    f: [
      'handle1',
      function handle2(newVal, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(newVal, oldVal) {
          console.log('handle3 triggered')
        }
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle1 triggered')
    }
  }
}

​
emits

​
emits
Array<string> | Object
Declare the custom events emitted by the component.Emitted events can be declared in two forms:
  • Simple form using an array of strings
  • Full form using an object where each property key is the name of the event, and the value is either null or a validator function
The validation function will receive the additional arguments passed to the component’s $emit call. For example, if this.$emit('foo', 1) is called, the corresponding validator for foo will receive the argument 1. The validator function should return a boolean to indicate whether the event arguments are valid.Note that the emits option affects which event listeners are considered component event listeners, rather than native DOM event listeners. Listeners for declared events will be removed from the component’s $attrs object, so they will not be passed through to the component’s root element. See Fallthrough Attributes for more details.Example:
// Array syntax
export default {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
}

// Object syntax
export default {
  emits: {
    // no validation
    click: null,

    // with validation
    submit: (payload) => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  }
}

​
expose

​
expose
Array<string>
Declare a list of public properties to expose when the component instance is accessed by a parent via template refs.By default, the component instance accessed via $refs, $parent or $root will expose all the instance properties to parent. This may not be desirable, since a component most likely has internal state or methods that should be kept private to avoid tight coupling.The expose option expects a list of property name strings. When expose is used, only the properties explicitly listed will be exposed on the component’s public instance.expose only affects user-defined properties - it does not filter out built-in component instance properties.Example:
export default {
  data() {
    return {
      count: 0,
      internalState: {}
    }
  },
  methods: {
    increment() {
      this.count++
    },
    privateMethod() {
      // internal logic
    }
  },
  // only count and increment will be exposed
  expose: ['count', 'increment']
}

Build docs developers (and LLMs) love

Get started for freeTalk to us