The Difference Between Computed Properties, Methods and Watchers in Vue

For those starting out learning Vue, there’s a bit of confusion over the difference between methods, computed properties and watchers.

Even though it’s often possible to use each of them to accomplish more or less the same thing, it’s important to know where each outshines the others.

In this quick tip, we’ll look at these three important aspects of a Vue application and their use cases. We’ll do this by building the same search component using each of these three approaches.

Methods

A method is more or less what you’d expect — a function that’s a property of an object. You use methods to react to events which happen in the DOM, or you can call them from elsewhere within your component — for example, from within a computed property or watcher. Methods are used to group common functionality — for example, to handle a form submission, or to build a reusable feature such as making an Ajax request.

You create a method in a Vue instance, inside the methods object:

new Vue({
  el: "#app",
  methods: {
    handleSubmit() {}
  }
})

And when you want to make use of it in your template, you do something like this:

<div id="app">
  <button @click="handleSubmit">
    Submit
  </button>
</div>

We use the v-on directive to attach the event handler to our DOM element, which can also be abbreviated to an @ sign.

The handleSubmit method will now get called each time the button is clicked. For instances when you want to pass an argument that will be needed in the body of the method, you can do this:

<div id="app">
  <button @click="handleSubmit(event)">
    Submit
  </button>
</div>

Here we’re passing an event object which, for example, would allow us to prevent the browser’s default action in the case of a form submission.

However, as we’re using a directive to attach the event, we can make use of a modifier to achieve the same thing more elegantly: @click.stop="handleSubmit".

Now let’s see an example of using a method to filter a list of data in an array.

In the demo, we want to render a list of data and a search box. The data rendered changes whenever a user enters a value in the search box. The template will look like this:

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      @keyup="handleSearch"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

As you can see, we’re referencing a handleSearch method, which is called every time the user types something into our search field. We need to create the method and data:

new Vue({
  el: '#app',
  data() {
    return {
      input: '',
      languages: []
    }
  },
  methods: {
    handleSearch() {
      this.languages = [
        'JavaScript',
        'Ruby',
        'Scala',
        'Python',
        'Java',
        'Kotlin',
        'Elixir'
      ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
    }
  },
  created() { this.handleSearch() }
})

The handleSearch method uses the value of the input field to update the items that are listed. One thing to note is that within the methods object, there’s no need to reference the method with this.handleSearch (as you’d have to do in React).

See the Pen Vue Methods by SitePoint (@SitePoint) on CodePen.

The post The Difference Between Computed Properties, Methods and Watchers in Vue appeared first on SitePoint.