The use of JavaScript computed properties and monitoring (listening) properties

This article brings you relevant knowledge aboutJavaScript, which mainly introduces the use of calculated properties and monitoring properties. Calculated properties refer to the final result after a series of operations. A value of , the monitor allows developers to monitor changes in data and perform specific operations based on changes in data; let’s take a look at it together, I hope it will be helpful to everyone.

[Related recommendations:JavaScript video tutorial,web front-end]

Calculated properties ( computed)

Computed properties refer toAfter a series of operations, a value is finally obtained. This dynamically calculated attribute value can be used by the template structure or methods method. The case is as follows:

 R：
 G：
 B： 
 {{rgb}} 
 按钮 
  

Use the name to dynamically change the calculated attribute case:

 
 
 全名：{{fullname}} 
  

Calculated attribute：

1. Definition: The attribute to be used does not exist, and the existing attribute must be passed Properties are obtained

2. Principle: The bottom layer uses the getters and setters provided by the Object.defineproperty method

3. Advantages: Compared with methods implementation, there is an internal caching mechanism (reuse), More efficient and convenient for debugging

4. Note: The calculated attributes will eventually appear on the vm and can be directly read and used; if the calculated attributes are to be modified, the set function must be written to respond to the change, and set In order to cause the data relied upon for calculation to change.

Monitoring properties (watch)

watch monitoring (listener)Allows developers to monitor changes in data, thereby targeting data Changes do specific operations.

Two methods of monitoring

Pass in the watch configuration when passing new Vue:

Monitoring via vm.$watch:

 
今天天气很{{info}}
 切换天气 
  

##immediate option

by default , the component will not call the watch listener after the initial loading. If you want the watch listener to be called immediately, you need to use the immediate option. The function of immediate is to control whether the listener

is automatically triggered once., the default value of the option is: false

Deep monitoring

If the watch is listening An object cannot be monitored if the property value in the object changes. At this time, you need to use the deep option to enable deep monitoring. As long as any attribute in the object changes, the "object listener" will be triggered.

If the object you want to listen to is the change of a sub-property, it must be wrapped in single quotes.

watch:{ "info.name"(newVal){ console.log(newVal); } }

Summary:

1) The watch in Vue does not monitor changes in the internal value of the object by default (one layer )

2) Configure deep:true to monitor changes in the internal value of the object (multi-layer)

3) Vue itself can monitor changes in the internal value of the object, but the watch provided by Vue cannot by default

4) When using watch, decide whether to use in-depth monitoring based on the specific structure of the data

watch can start asynchronous tasks, the case is as follows:

 
 
 全名：{{fullname}} 
  

The difference between computed and watch:

1.Watch can complete all the functions that computed can complete.

2. The functions that watch can complete may not be completed by computed. For example: watch can perform asynchronous operations.

Implicit principles:

1. Functions managed by Vue are best written as ordinary functions, so that this points to the vm or component instance object

2. Functions that are not managed by Vue (timer callback function, ajax callback function, Promise callback function) are best written as arrow functions, so that this points to the vm or component instance object.

[Related recommendations:JavaScript video tutorial,web front-end development]

The above is the detailed content of The use of JavaScript computed properties and monitoring (listening) properties. For more information, please follow other related articles on the PHP Chinese website!