VueJs, difference between computed property and watcher?

Question

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

var vm = new Vue({
  el: \'#demo\',
  data: {
    firstName: \'Foo\',
    lastName: \'Bar\',
    full         


        

Answer 1

Computed properties have a a very specific purpose: composing new data derived from other data. They are used whenever you have some data and need to transform it, filter it, or otherwise manipulate it before using it in the template.

Computed properties always have to return a value, should not have any side effects, and they have to be synchronous.

So there are quite some situations where computed properties won't help you, for example: your component receives a prop, and whenever the prop changes, your component had to make an ajax request. For this, you would need a watcher.

Watchers are not useful as often as computed properties, so you should always think about whether or not a computed property can solve your problem, and only fall back on a watcher (or sometimes a method) if that is not the case.