This is the 16th day of my participation in the August More Text Challenge.

1. Basic explanation

1.1) computed:

The calculation properties are mixed into the Vue instance, and the This context of all getters and setters is automatically bound to the Vue instanceCopy the code

1.2) the methods:

Methods will be blended into the Vue instance. These methods can be accessed directly from a VM instance or used in an instruction expression. Method this is automatically bound to a Vue instance.Copy the code

1.3) watch:

Observe and respond to changes in data on the Vue instance. An object, the key is the expression to observe, the value is the callback function, the value can also be a method name, or an object containing options. The Vue instance will call at instantiation time,$watch(), iterating through each property of the Watch objectCopy the code

Watch has a principle of who to listen for, whose name to write, and then the corresponding execution function. The first parameter is the last value changed, the second value is the last value changed,

Note: In addition to listening for data, you can also listen for computed properties or the computed results of a function

  • Enable deep listening objects
watch:{ 
    a: {handler:function(val,oldval){},deep:true}}Copy the code

2. The loading sequence of the three

  • Computed is performed immediately after the HTML DOM is loaded, such as assignment; (Attributes will be mixed into Vue examples)

  • Methods must have certain trigger conditions to execute, such as click event. How about Watch? It is used to observe changes in data on Vue instances,

  • Computed before watch is loaded by default, and methods are not executed.

  • After an event is triggered, computed, then Methods, then Watch, computed properties vs. Method, computed properties are cached based on their dependencies

3, summarize

Computed attributes are reevaluated only when its dependencies change. When A computed attribute A has A high performance, it needs to traverse A large array and do A lot of calculations. Then we may have other computed attributes that depend on A, and we need caching. Use Methods every time you do need to reload and no caching is required