What is the difference between computed properties and the methods of a Vue.js instance?

Question

I am trying to understand the difference between the two, when using one or the other, I know that there are also the Watchers, which the correct use of them?

Answer 1

In a Vue component we have to have things organized, for that there are some concepts/parameters to take into account and that are the way a component works.

methods

Here you should save functions. All kinds of functions that process data and component functionality.

Keeping these functions in the methods allows them to be used in other components, by inheritance or by degree of kinship.

Here you can also import methods from the store.

date

Here you must primitive guards. Strings, arrays, objects, etc. In the background the state of the component.

computed

Here’s a mix of the previous two, and enter the reactive programming logic/methodology. These methods are functions that return data are likely to have been changed between renderings. Imagine an example:

You have a picture in the component and you want to take the corner to make it bigger. Somewhere in logic you have to say which width, height image. Then you want to drag (drag) it and you will have to control the left and top of that image.

Now it has a 4 values spread in the data, and then in the template a mixed with these values: <img :styles="" which is a little difficult to maintain; the mellhor is to have a computed for that reason:

computed: 
    styles(){
        return {left: this.left, top: this.top, height: this.height, width: this.width};
    }
}

and in the template is much cleaner with only <img :styles="styles".

Another very useful feature is that we can import from the store the getters that go to computed and store methods that go to the methods of the component.

props

The data passed to the component. This is one of the few pathways of data passing, and allows rigid typing controls. What is in the data is internal to the component and possibly to its descendants. What is in the props are given to use in the component and cannot be changed directly, only via a change in the state of the component or part of the application that generates this data.

watch

Here you should store methods that should be called when the value of a property of data or props change. There may be cases where it works use computed, others watch. As a general rule, if there’s anything you need to know when it’s changed use watch; when you want to always have updated data, use computed.