This is my second article about getting started
Computed properties computed:
- Support caching, only the dependent data changes, will be recalculated
- Asynchronism is not supported. It does not work when there is asynchronous operation in computed, and data changes cannot be monitored
- Computed attribute values are cached by default, and computed attributes are cached based on their reactive dependencies, that is, values computed from the data declared in data or passed by the parent component
- If a property is computed by something else, that property depends on something else, it’s a many-to-one or one-to-one, usually computed
- If the computed attribute value is a function, the default is to use the GET method; The return value of the function is the property value of the property; In computed, attributes have a GET and a set method, which are called when data changes.
Listen on property Watch:
- Does not support cache, data change, will directly trigger the corresponding operation;
- Watch supports asynchrony;
- The listening function takes two arguments, the first of which is the latest value; The second argument is the value before input;
- When an attribute changes, you need to perform the corresponding operation. A couple more;
- The listening data must be the data declared in data or passed by the parent component in props. When the data changes, other operations are triggered. The function takes two arguments,
- Immediate: The callback function is executed immediately after the component is loaded.
- Deep: Used for complex types of data to detect changes in the value of an object, such as changes in the contents of the object in an array. Note that this is not required to listen for changes in the array. Note: Deep cannot listen for array changes or object additions, as in vUE array mutations, only when triggered in a responsive manner.
The listening object can also be written as a string
This approach is most useful when asynchronous or expensive operations need to be performed when data changes. This is the biggest difference between computed tomography and do not abuse it. Yeah, just sauce
Usage scenarios
- computed
- Computed is used when an attribute is affected by more than one attribute
- The most typical example: shopping cart checkout time
- watch
- When one data affects multiple data sets, watch is needed
- Search data