Vue difference between the computed and watch, as well as application scenarios

computed: calculated from coming by the attributes

  1, function computed without internal when calling ().

  2, computed change is dependent on the data attribute changes in vm, that is, when the data changes in the properties of the current function will be executed, the attribute data did not change when the current function will not be executed.

  3, the function of the computed must be returned with the return .

  4, the computed Do not do an assignment on the data in the property. If the data of the assignment of attributes, the attributes data is changed, so that the trigger function is computed, forming a endless loop.

  5, when the function computed in the dependent property is not changed, then called the current function of time will be read from the cache .

  

  Usage scenarios: When a property value by more affected ------------ cart Commodity Clearing

 

watch: property monitor

  1, function names in the watch and attribute names must be in the same data, because the watch is dependent on the data in the property, when the property changed data, the function will watch the execution.

  2, the function of the watch there are two parameters, the former is newVal, which is oldVal.

  3, the function does not need to watch is the call.

  4, Watch will monitor whether the value of the data changes, but does not address whether to monitor data changes. In other words, watch want to monitor changes in the type of reference data, the need for in-depth monitoring. "obj.name" () {} ------ if obj properties too, this method is inefficient, obj: {handler (newVal) {}, deep: true} ------ depth monitor with handler + deep way .

  5, in exceptional cases, watch not listen to the changes in the array of special circumstances, that is to change the data in the array, the array has been changed, but the view is not updated. Change the array must use the splice () or the SET $ . this.arr.splice (0,1,100) ----- modifications arr start of a data 0 is 100, this. $ set (this.arr , 0,100) ----- modifications of 0 arr value of 100.

  6, load immediate: true when the page first loads to do a listener.

 

  Usage scenarios: When you change a data affect multiple pieces of data when --------- search box

  

 

the difference:

  1, the function: computed attribute is calculated, watch is to monitor a change in the value, and then performs the corresponding correction.

  2, whether to call Cache: function computed in the dependent property does not change, then the function that called the current time will be read from the cache, changes occur in the value of each watch is going to be listening callback.

  3, whether to call return: function computed must use return to return the watch function is not necessary to use return.

  4, usage scenarios: computed ---- When a property affected by multiple properties, the use of computed ------- Cart settlement. watch ---- When a data affecting pieces of data when using the watch ------- search box.

  

  

Guess you like

Origin www.cnblogs.com/wuqilang/p/11241604.html