“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Calculate attribute

  1. Definition: the attribute to be used does not exist and is computed from an existing attribute.
  2. How it works: The bottom layer uses getters and setters provided by the objcet.defineProperty method.
  3. When is the get function executed? (1). It will be executed once for the first read. (2). It will be called again when the dependent data changes.
  4. Advantages: Compared with methods implementation, internal caching mechanism (reuse), higher efficiency, convenient debugging. The calculated property is cached based on its reactive dependencies. The evaluation is reevaluated only if the associated reactive dependencies of the calculated property change. This means that as long as the corresponding dependent data in the data has not changed, the related function in the multiple access to the calculated property will immediately return the computed result without executing the function again. But with a calculation method, that function is called whenever a function in a method is accessed.
  5. Note: (1) Calculated attributes will eventually appear on the VM, which can be directly read and used. (2) If the calculation attribute is to be modified, the set function must be written to respond to the modification, and the data dependent on the calculation must be changed in the set.
// Complete form
fullName: {// What does get do? When someone reads the fullName, get is called and the return value is the fullname value
    // When is get called? 1. When the fullname is read for the first time 2. When the dependent data changes
    get(){
        console.log('Get is called')
        return this.firstName+The '-'+this.lastName
    },
    // When is set called? When the fullname is modified
    set(value){
        const arr = value.split(The '-')
        this.firstName = arr[0]
        this.lastName = arr[1]}}Copy the code

When someone reads a fullname, get is called and the value returned is the fullname value. When the data on which the calculated property depends changes, get is also called. The call to set usually occurs when the fullname is modified. The calculated property can also be abbreviated as follows, but this does not modify the calculated property, and the shorthand does not configure other properties, such as immediate,deep

// Read only
    fullName(){
        return this.firstName+The '-'+this.lastName
    }
Copy the code

Monitoring properties

Monitor property Watch:

  1. When the monitored property changes, the callback function is called automatically to perform the related operation
  2. The monitoring attribute must exist in order to monitor
  3. Monitoring can be written in two ways: (1). New Vue passes in the watch configuration (2). Monitor through vm.$watch
// Watch configuration is passed in for new Vue
watch: {isHot: {immediate:true.// When initializing, let handler call it
            // When is the handler called? When isHot changes
            handler(newValue,oldValue){
                console.log('isHot has been modified ', newValue, oldValue)
            }
        }
Copy the code
// vm.$watch configures monitoring methods
vm.$watch('isHot', {immediate:true.// When initializing, let handler call it
    // When is the handler called? When isHot changes
    handler(newValue,oldValue){
        console.log('isHot has been modified ', newValue, oldValue)
}})
Copy the code

The depth of the monitor

Deep monitoring:

  1. By default, watch in Vue does not monitor changes in the internal values of objects (one layer).
  2. Configure deep:true to detect changes in the object’s internal value (multiple layers).

Remark:

  1. Vue itself can detect changes in the internal value of an object, but the watch provided by Vue cannot by default!
  2. When using Watch, you can decide whether to use deep monitoring based on the specific structure of data.
// Watch configuration is passed in for new Vue
watch: {//
    isHot: {immediate:true.// When initializing, let handler call it
        deep:true.// Deep monitoring
        // When is the handler called? When isHot changes
        handler(newValue,oldValue){
            console.log('isHot has been modified ', newValue, oldValue)
        }
    },  
    / / short
    isHot(newValue,oldValue){
        console.log('isHot has been modified ', newValue, oldValue)
    }
}
Copy the code
// monitor with vm.$watch
/* vm.$watch('isHot',{immediate:true, immediate:true) Handler (newValue,oldValue){console.log('isHot changed ', newValue,oldValue)}}) */
// Short, short cannot configure other attributes, such as immediate,deep
vm.$watch('isHot'.function(newValue,oldValue){
    console.log('isHot has been modified ', newValue, oldValue)
})
Copy the code

Differences between computed and Watch:

  1. The watch can do what computed can do.

  2. For example, with computed, the watch can perform asynchronous operations.

Two important little principles:

  1. Vue-managed functions are best written as normal functions so that this refers to a VM or component instance object.
  2. All functions not managed by Vue (timer callbacks, Ajax callbacks, Promise callbacks, etc.) are best written as arrow functions so that this points to the VM or component instance object.