Computed properties: computed

role

  • Reduce calculation logic in templates
  • Data caching
  • Depends on fixed data types

use

  • Define methods to evaluate properties in a computed property object
  • Use {{method name}} on the page to display the results of the calculation
  • Display and monitor property data through getter/setter

Pay attention to the point

  • Computed properties are cached based on their dependencies and reevaluated only when the associated dependencies change. As long as the associated dependencies remain unchanged, only the previous result is returned and no function is executed.
  • Computed relies on monitoring variables defined by itself. Computed cannot compute values already defined in data, which can then be data bound on the page
  • Computed is more suitable for processing multiple variables or objects and returning a result value, that is, if one of the variables changes, the value that we monitor changes

The instance

Input type="text" placeholder=" placeholder "v-model="firstName"></label><br/> <label> <input type="text" placeholder=" v-model="lastName"></label> <input type="text" placeholder=" placeholder "v-model="fullName"></label> </div> </template> <script> export default {name: "ComputedAndWatch", data(){ return { firstName:'', lastName:'', } }, Computed :{fullName:{get(){return this.firstName + '·' + this.lastname}}}}Copy the code

Implement bidirectional binding

set(value){
    console.log(`${value}`);        // Test: string concatenation can only use ' '
    let names = value.split(', ');
    this.firstName = names[0];
    this.lastName = names[1];
}
Copy the code

Usage scenarios

  • Computed is good at handling scenarios in which multiple data are affected by one data

Listener: Watch

role

  • It is used to monitor vUE instance changes. The variables to be monitored must be declared in data
  • You can monitor a variable or an object, but only the whole object or a single variable,
  • Dependency on fixed data types (reactive data)

use

  • The specified properties are monitored through the VM object’s $watch() or watch configuration
  • When the property changes, the callback function is called automatically and evaluated inside the function
  • Watch cannot bind values in both directions

The instance

watch:{
    / / to monitor firstName
    firstName(value){
        console.log('Watch' detects firstName change:${value}`);
        / / update the fullName
        this.fullName  = value + ', ' + this.lastName
        },
    / / to monitor the lastName
    lastName(value){
        console.log('Watch watches lastName change:${value}`);
        this.fullName  = this.firstName + ', ' + value
        }
    }
Copy the code

Usage scenarios

  • Watch is generally used for monitoring routing and special processing of values in input boxes. It is suitable for scenarios where one data affects multiple data

conclusion

  • Use computed wherever possible
  • Computed computes a new attribute and mounts it to the VM, whereas watch listens for data that already exists and is mounted to the VM, so watch can also listen for changes in computed attributes
  • Computed is essentially a lazy-evaluated observer that is cacheable. New values are computed only when the first access to computed properties is made after the dependency changes, whereas watch calls an execution function when the data changes
  • In terms of usage scenarios, computed uses one data and is affected by multiple data, while Watch applies one data and affects multiple data