A: watch

The official explanation is that this approach is most useful when asynchronous or expensive operations need to be performed when data changes. How to understand this sentence? As an example, the Watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set the intermediate state to listen for a single value until we get the final result. And perform related operations

  • Component initialization does not trigger listening
  • If you want to listen for the first time after initialization, you need to write handler and set immediate: true.
watch: {
    obj: {
        handler () {
            console.log('object changed')
        }
    }
    immediate: true
}
Copy the code
  • When listening on an object, only the reference of the object is listened on by default. If you need to listen on the property value of the object, you can use either of the following methods
  1. Set up the deep: true, This attribute is used to listen on all the attribute values of the object, which consumes high performance. If only certain values of the object need to be listened on, the following method is better
  2. Set the specific value of the listener: ‘obj.a’; Write the object value in quotes, as follows
watch: {
    'obj.a': {
        handler () {
            console.log('object changed')
        }
    }
    immediate: true
}
Copy the code

Two: Computed attributes

Computed is used to listen for values that need to be computed depending on other attributes. Computed caches the computed values and does not recalculate if the dependent values do not change. It does not recalculate updates as long as the dependent data does not change, whereas methods in Methods are executed every time they are refreshed

3: method

For computed and Watch monitoring, be careful not to modify attributes that trigger their own updates; otherwise, an infinite loop of updates will occur

According to the above learning and their own experience to make a summary:

  1. Computed is a calculation of attributes that relies on other attributes; Watch is to monitor the change of a value and execute the corresponding method
  2. Computed values are cached after the getter is executed. Only after the property values on which it depends are changed, will the corresponding getter be called again when the computed value is obtained next time. Watch executes a callback every time the value it listens for changes. If a value depends on multiple attributes (many-to-one), using computed is certainly more convenient. If a change in value causes a series of operations, or if a change in value causes a series of changes (one-to-many), watch is more convenient
  3. The watch callback will pass in the old and new values of the listening properties, which can be used to do some specific operations; Computations usually mean simple calculations
  4. Methods in methods do not have the ability to actively listen, and, compared with computed, do not have the ability to cache, and will be executed again every time (especially during SPA switching). But more flexible, you can manually call
  5. None of them are lower. What Watch and computed have in common is that each defined attribute creates a separate Watcher object, which methods do not