The difference between computed attributes and methods

Computed, or computed properties, used to store computed values, are defined as functions, but cannot be called in parentheses when called from template; that is, the function cannot take parameters.

That is, both methods and computed are used to define functions, but the difference is that a method-defined function can be called in parentheses from template to receive parameters, whereas a computed function can only be evaluated by the template function.

Unlike Methods, which can define functions to handle all kinds of event listening, and which can be nested within template, Template can only call computed results, but not the calculation logic. So that in some cases some of the simple operations can be done in computed so that the code can be simpler.

In essence, methods returns an operation process that processes data, while computed returns an operation result after data processing. In other words, computed returns a dependent variable that cannot be actively assigned.

To sum up, computed by computed logic is cached, and values computed by computed logic are stored in the cache for reuse, which is good for saving performance. Methods have no cache and are recalculated every time the logic is called.

For computed basic use – set and GET

Not only functions but also objects can be written in computed. You can privatize props passed in by the parent component by dividing objects in computed into get and SET functions. Get gets data, and SET sets data.

The first click on ownX is actually the x value that GET gets from the parent component. The second click on ownX still gets the x value of the parent component, but the x value of the parent component remains the same. So no matter how many clicks you get, you’re going to get the result of the first click.

Computed does not seem to be much use now, but in VueX it will be enormously useful.

The role of the listener Watch

Watch is an object in which all properties are functions that fire when their namesames data change.

In other words, watch can monitor data changes and interact with data.

Methods, computed, watch comparison