VueJs, difference between computed property and watcher?

serkan :

On Vue.js documentation there is an example like below:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

The above code is imperative and repetitive. Compare it with a computed property version:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

What are the situations when watchers more suitable than computed properties? How should i decide which to choose? Documentation keeps saying it is more "generic" but does not really put its purpose.

Amresh Venugopal :

Computed Properties

A computed property sample:

computed: {
   val () {
     return this.someDataProperty * someOtherVariable
   }
}

what does this particular piece of code do?

  1. It creates a property named val for the component (on the prototype so <vueInstanece>.hasOwnProperty('val') would show false).

  2. It has a dependency tree which consists of reactive properties (data properties, other computed properties) in this case : this.someDataProperty, which means the moment the dependencies change, the computed property will be recalculated.

  3. Although debated, can't have arguments passed to it. So something like

    computed: {
      val (flag) {
        return (flag === 1) 
          ? this.someDataProperty * someOtherVariable 
          : this.someDataProperty * 5
        }
    }
    

    can't be done

[EDIT] See: https://vuejs.org/v2/guide/computed.html#Computed-Setter

Watcher

A watcher sample:

watch: {
   val (n, o) {
     console.log(n, o)
   }
}
  1. It does not create any new property, but it watches the changes over a reactive property.

  2. Watches only one specific property, unlike computed where any dependent property change can cause recalculation.

  3. Has arguments of new and old value.


So computed properties would be the way to go if:

You want a property that depends on other properties always. Like text formatting for a template, which is even the example in your code.

Or reducing variable lengths as this is quite common:

this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty

can be reduced to:

computed: {
  someDeeplyNestedProperty () {
     return this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty
  }
}

Not just reduction in variable size, each time the store updates, you will have the latest value in the someDeeplyNestedProperty.


And Watchers are useful if you want to see if one reactive property has changed to a favourable value to know that you're ready to perform an action.

like:

watch: {
  somethingSelected() {
    this.router.push('someOtherRoute')
  }
}

EDIT: I came across some good article by Flavio Copes who listed common use cases for each of them (methods, computed props, watchers):

When to use methods

  • To react on some event happening in the DOM

  • To call a function when something happens in your component. You can call a methods from computed properties or watchers.

When to use computed properties

  • You need to compose new data from existing data sources
  • You have a variable you use in your template that’s built from one or more data properties
  • You want to reduce a complicated, nested property name to a more readable and easy to use one, yet update it when the original property changes
  • You need to reference a value from the template. In this case, creating a computed property is the best thing because it’s cached.
  • You need to listen to changes of more than one data property

When to use watchers

  • You want to listen when a data property changes, and perform some action
  • You want to listen to a prop value change
  • You only need to listen to one specific property (you can’t watch multiple properties at the same time)
  • You want to watch a data property until it reaches some specific value and then do something

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related