Vue's computed property computed
Definition
Generates a new composite attribute by computing existing attributes.
Principle
The bottom layer is implemented with the help of the getter and setter provided by the Object.defineproperty method.
Nature
The code content of a computed property is a method, but in Vue it is a property of Vue.
In most cases, the calculated attribute will not be modified, so the set method can not be written when only considering the read and not the change, and then only the get method, then the calculated attribute can be abbreviated
Listening attribute watch
Monitor attribute watch
1 When the monitored attribute changes, the callback function is automatically called to perform related operations
2 The monitored attribute must exist to be able to monitor
3 There are two ways to
write the watch (1) When new Vue is used, directly write the watch configuration
(2) Pass ( vue instance name. watch ('monitored property name') here the instance name is vm, note that the property name in brackets here needs to be quoted) vm .watch('monitored property name') here the instance name is vm , note that the attribute names in brackets need to be quoted) vm.watch(' Listentopropertyname′ )herethe instancename isvm,note ,The attribute names in parentheses need to be quoted ) v m . watch ( 'monitored attribute name')
Run to the browser:
Click the 'Change Date' button to watch the console change
The immediate attribute controls whether the handler in the monitor will be executed when it is initialized. The default is false. If it is changed to true, the handler will be executed when the vue instance is initialized.
The old value here is undefined, because it will be loaded during initialization, so the original value is directly regarded as the new value, and the original value is treated as non-existent here
deep monitoring
When there are nested attribute values in the attribute value, can it still be monitored at this time? Let’s try it out. At this time,
we click the x++ button and the y++ button to change the values of x and y, because when defined above, x and y are num Attributes, we change x and y to observe whether num has been monitored for changes:
at this time, although the internal attributes of num have changed, Vue has not monitored the changes of num.
At this time, we need to write the next level of monitoring in the monitoring
At this time, change the values of x and y in the page
Here you can directly write like this:
Deep monitoring:
(1) The watch in vue does not detect the internal value change of the object by default (only monitors one layer)
(2) Configure deep:true to enable detection of the internal value change of the object (multi-layer)
(3 ) Vue itself can monitor the internal value of the object to change, but the watch provided by vue cannot by default
(4) When using watch, it is determined whether to use deep monitoring according to the specific structure of the data
Shorthand for monitoring:
When the data we want to monitor only needs to be configured with a handler, shorthand for monitoring:
Shorthand after initializing the instance:
The difference between computed and watch:
1. The functions that can be completed by computed can be completed by watch.
2. The functions that can be completed by watch may not be completed by computed. For example, watch can perform asynchronous operations (such as timing operations).
Two important principles:
1. All functions managed by vue It is better to write it as a normal function so that the point of this will be the vue instance or component instance object
2 All functions not managed by vue (timer callback function ajax callback function Promise callback function) are best written as arrow functions =>() , so that the point of this is the vue instance or component instance object