Data Properties and Methods

These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the data function. Where necessary, use null, undefined or some other placeholder value for properties where the desired value isn’t yet available.

It is possible to add a new property directly to the component instance without including it in data. However, because this property isn’t backed by the reactive $data object, it won’t automatically be tracked by .

Vue uses a $ prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix _ for internal properties. You should avoid using names for top-level data properties that start with either of these characters.

Methods

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` will refer to the component instance
      this.count++
    }
  }
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5

Vue automatically binds the this value for methods so that it always refers to the component instance. This ensures that a method retains the correct this value if it’s used as an event listener or callback. You should avoid using arrow functions when defining methods, as that prevents Vue from binding the appropriate this value.

Just like all other properties of the component instance, the methods are accessible from within the component’s template. Inside a template they are most commonly used as event listeners:

In the example above, the method increment will be called when the <button> is clicked.

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

If the methods toTitleDate or access any reactive data then it will be tracked as a rendering dependency, just as if it had been used in the template directly.

Methods called from a template should not have any side effects, such as changing data or triggering asynchronous processes. If you find yourself tempted to do that you should probably use a lifecycle hook instead.

Vue doesn’t include built-in support for debouncing or throttling but it can be implemented using libraries such as .

However, this approach is potentially problematic for components that are reused because they’ll all share the same debounced function. To keep the component instances independent from each other, we can add the debounced function in the created lifecycle hook:

app.component('save-button', {
  created() {
    // Debouncing with Lodash
    this.debouncedClick = _.debounce(this.click, 500)
  unmounted() {
    // Cancel the timer when the component is removed
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... respond to click ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>