Vue.js is limited in template expressions. Binding expressions can only have one expression at most, but some data needs more than one expression operation to implement. At this time, this data can be placed in the computed property (computed) among.
The difference between computed, methods, and watch in Vuejs.
1#computed: The computed property will be mixed into the Vue instance. The this context of all getters and setters is automatically bound to the Vue instance.
2#methods: methods will be mixed into the Vue instance. These methods can be accessed directly through the VM instance, or used in instruction expressions. This in the method is automatically bound to the Vue instance.
3#watch: is a more general way to observe and respond to data changes on a Vue instance. An object, the key is the expression to be observed, and the value is the corresponding callback function. The value can also be a method name, or an object containing options. The Vue instance will call $watch() on instantiation, iterating over every property of the watch object.
In layman's terms:
-
computed is executed immediately after the HTML DOM is loaded,
-
Such as assignment; and methods must have certain trigger conditions to execute, such as click events;
-
What about watch? It is used to observe data changes on the Vue instance. Corresponds to an object, the key is the observation expression, and the value is the corresponding callback. The value can also be a method name, or an object, containing options.
Therefore, their execution order is: when loading by default, first compute and then watch, and do not execute methods; after triggering an event, it is: first methods and then watch.
The following example can be used as an illustration.
computed vs watched property: Vue does provide a more general way to observe and respond to data changes on Vue instances: the watch property. When you have some data that needs to change with other data, it's easy to abuse watch - especially if you've used AngularJS before. However, it is usually a better idea to use computed properties instead of imperative watch callbacks.