Vue methods, computed, watchers: A simple overview for Vue.js developers

Vue.js is probably one of the most enjoyable Javascript libraries to work with. This is because it has an intuitive API, it’s fast, easy to use, and flexible. As a result, there are a lot of approaches that the developer can use for developing Vue.js. Vue methods, computed and watchers are certainly among some of the most prominent ones that can be used. Also, the legibility of their distinction is just too good for programmers to perform.

The overview when using these three approaches: Vue methods, computed, watchers
The overview when using these three approaches

So, for those starting out learning Vue, there’s a bit of confusion over the difference between Vue 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. So now, we would like to introduce a completed, simple overview that Vue.js developers like you guys should know to get a better aspect of Vue.

#1. Vue methods

So this is just what you’ve expected – a function that’s a property of an object. The usage of Vue methods is certainly to react to events that happen in the DOM, or you can call them from elsewhere within your component. They’re functions that hang off of an object – typically the Vue instance itself or a Vue component instead. For example, you can handle form submissions, or to build a reusable feature such as making an Ajax request.

They’re obviously useful for connecting functionality to directives for events or even just creating a small bit of logic to be reused like any other function. You can call a method within another method, for example. Also, you can call a method inside a lifecycle hook. They’re very versatile.

To demonstrate further about this, let’s go to the example of this:

 new Vue({
  el: '#app',
  data() {
    return {
      input: '',
      languages: []
    }
  },
  methods: {
    handleSearch() {
      this.languages = [
        'English',
        'Vietnamese',
        'French',
        'Chinese',
        'Japanese',
        'Spanish',
        'Korean'
      ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
    }
  },
  created() { this.handleSearch() }
})

So as you can see, we’re referencing a handleSearch method. This is called every time the user types something into the search field. Also, the handleSearch method uses the value of the input field to update the listed items. One thing to note: within the Vue methods object, there’s certainly no need to reference the method with this.handleSearch.

#2. Computed

While the search in the above example of Vue methods works as expected, a more elegant solution would be to use a computed property. This is much handier when it comes to composing new data from existing sources, and one of the big advantages they have over methods is that their output is cached. Also, unlike Vue methods, this approach enables us to make calculations on the fly using data that’s available to us.

To understand a little better about computed, let’s see the example below:

 new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: [
        "English",
        "Vietnamese",
        "French",
        "Chinese",
        "Japanese",
        "Spanish",
        "Korean"
      ]
    }
  },
  computed: {
    filteredList() {
      return this.languages.filter((item) => {
        return item.toLowerCase().includes(this.input.toLowerCase())
      })
    }
  }
})

To clarify, the filteredList computed property will contain an array of items that include the value of the input field. On the first render (when the input field is empty), the whole array will be rendered. So, as the user enters a value into the field, filteredList will return an array that includes the value entered into the field. When making use of computed properties instead of Vue methods, the data you want to compute has to be available, else this will result in an error.

#3. Watchers

Watchers are useful for cases when you want to perform an action in response to a change that has occurred. As mentioned, this is most useful when you want to perform expensive operations (even better than Vue methods). Also, it’s a nice way of looking at how watchers are different from computed properties, where the change will be in reference to the property we intend to use.

To understand more about this approach, let’s go to the example below:

 new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: []
    }
  },
  watch: {
    input: {
      handler() {
        this.languages = [
          'English',
          'Vietnamese',
          'French',
          'Chinese',
          'Japanese',
          'Spanish',
          'Korean'
        ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
      },
      immediate: true
    }
  }
})

Here, we’ve made the watcher an object. This is so that we can specify an immediate property. As a result, it will cause the watcher to trigger as soon as the component is mounted. This obviously has the effect of populating the list. The function that’s run is then in the handler property. As a result, we only had to add a couple of lines of code to make this work. Also, we didn’t have to load any additional libraries like Vue methods hay computed approach.

Final words

That should be it! Here is the simple overview of Vue methods, computed and watches that the developers should know when it comes to Vue.js development. All in all, Vue gives you the superpowers needed to build great applications. Knowing when to use each of them is the key to building what your users will love. So, going forward, make sure to use them well and your website will be flourished in its own way.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best software development services for your eCommerce business. So, you can check us out now: ArrowHiTech services. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

ArrowHiTech services

So if you have any questions, don’t hesitate to contact us via email support@arrowhitech.com or our phone number +84 243 7955 813. We would love to hear every feedback from you guys.