What is the difference between computed and methods?

Interview question: What is the difference between computed and methods?

Standard and simple answer

1. When used, computed is used as an attribute, and methods is used as a method call.
2. computed can have getters and setters, so assignment is possible, while methods cannot
3. computed cannot receive multiple parameters, but methods can
4. computed has a cache, methods does not

An answer closer to the underlying principles

Vue's processing of methods is relatively simple. You only need to traverse each attribute in the methods configuration, bind its corresponding function to the current component instance using bind, and then copy its reference to the component instance.

The processing of computed by vue will be slightly more complicated.

When the component instance triggers the life cycle function beforeCreate, it will do a series of things, including processing computed

It will traverse all properties in the computed configuration, create a Watcher object for each property, and pass in a function. The essence of the function is actually the getter in the computed configuration. In this way, the getter will collect dependencies during its operation.

However, unlike the rendering function, the Watcher created for the calculated property will not be executed immediately, because it is necessary to consider whether the calculated property will be used by the rendering function. If it is not used, it will not be executed. Therefore, when creating the Watcher, it uses the lazy configuration. The lazy configuration prevents the Watcher from executing immediately.

Due to the impact received lazy, Watcher will save two key attributes internally to implement caching, one is valueand the other isdirty

valueThe attribute is used to save the results of the Watcher operation. Affected lazyby the value, the value is initiallyundefined

dirtyThe attribute is used to indicate whether the current value valueis outdated, that is, whether it is a dirty value, and is affected by the lazyvalue. The value was initiallytrue

After the Watcher is created, Vue will use the proxy mode to mount the calculated properties to the component instance.

When reading a calculated property, Vue checks whether its corresponding Watcher is a dirty value. If so, it runs the function, calculates the dependencies, gets the corresponding value, saves it in the value of the Watcher, then sets dirty to false, and returns.

If dirty is false, the value of the watcher is returned directly.

The clever thing is that during dependency collection, the dependent data will not only collect the Watcher of the calculated property, but also the Watcher of the component.

When the dependency of a calculated property changes, the Watcher execution of the calculated property will be triggered first. At this time, it only needs to be set dirtyto true without any processing.

Since the dependency will also collect the Watcher of the component, the component will be re-rendered, and the calculated property will be read during the re-rendering. Since the calculated property is currently dirty, the getter will be re-run for calculation.

As for the setter of the calculated property, it is extremely simple. When setting the calculated property, just run the setter directly.