Summary of the use of vue Watch and Computed

01. Listener watch

(1) Function

• Watch: used to listen for data changes in data, only when the value of the listened attribute changes when the value of the attribute being listened to changes.

export default {
    data() {
        return {
            number: 1
        }
    },
    watch:{
        // Normal listening method, here represents the number attribute in listening data        // The first parameter represents the new value after the change, and the second parameter represents the old value before the change        number(newVal,oldVal){
            (newVal);
            (oldVal);
        }
    }
}

(2) Attributes and methods

• immediate: means that after the component is created, the attribute is immediately listened to. When the value is initially bound, it is set to: immediate: true
• handler: Used when listening to objects, and when changes occur, execute the method in handler ~
• deep: indicates the changes in the deep listening object and the properties inside the array, set to: deep: true

export default {
    data(){
        return {
            number: 1
        }
    },
    watch: {
        // Listen to the number attribute        number: {
			handler(newVal, oldVal){
                
            },
            immediate: true, // Listen immediately        }
    }
}

(3) Monitoring object

• Can listen to the object's direct assignment operation
  • But it cannot listen to the addition, modification, or deletion of object properties

export default {
    data() {
        return {
            obj: {
                a: 1
            }
        }
    },
    watch: {
        obj: {
            handler(newVal){
                ('Speaked', newVal)
            },
            immediate: true
        }
    },
    created(){
        // Cannot be monitored because it is a modification operation to the attribute        // Print once, and the print result is the modified value.         = 2 

        // You can listen because it is an assignment operation directly to the object        // Print twice (immediate will be printed once immediately and will be printed once when modifying)         = { a: 2} 
    }
}

Since Vue will perform the getter/setter conversion process on the attribute when initializing the instance

Therefore, the property must exist on the data object in order for Vue to convert it so that it can be responsive

Therefore, Vue cannot detect the addition, deletion, modification and other operations of object properties

By default handler only listens to changes in references to the object's internal properties.

Therefore, it will only listen when we perform assignment operations

• You can directly listen to a certain attribute value of the object
  • If this property is a value of the basic type, it can be monitored normally

export default {
    watch: {
        '': {
            handler(newVal){
                (newVal)
            }
        }
    },
    created(){
        // The following two can be monitored and printed twice         = 2
         = { a:2 }
    }
}

• You can use the deep attribute for deep monitoring
  • Only listen for changes in the original attributes, not new attributes
  • vue cannot listen to this.$set modify changes in the original attribute

This is because this.$set() is equivalent to changing the initial value in data

It can trigger monitoring, but the changes cannot be reflected, that is, newVal === oldVal

export default {
    watch: {
        obj: {
            handler(newVal){
            	(newVal)
            },
            deep: true,
            immediate: true
        }
    },
    created(){
        // After deep monitoring, you can also listen to the changes in the attributes directly by modifying them.        // Print twice (because immediate)         = 2
        
        // Cannot listen to the increase of object properties        // Print once, and the print result is an object with new attributes added        // That is, it will only be executed once due to immediate and print out {a:1,b:2}         = 2
        
        // Listening can be triggered, but changes cannot be heard        // Print twice, the value is {a:2} and cannot reflect the change        this.$set(, 'a', 2)
    }
}

(4) Listen to the array

• Can monitor
  • Direct assignment of arrays
  • Add, modify, and delete operations through array methods
  • Array operation through this.$set() method

Array methods such as pop(), push(), etc., and this.$set(arr, index, newVal) method

They can trigger listening, but cannot reflect changes, i.e. newVal === oldVal

• Cannot monitor
  • Unable to listen to the addition, deletion, and modification operations of non-array methods of arrays
  • Cannot listen for changes to arrays directly through index values
  • Unable to listen for changes in the length of the array directly modified

export default {
    data() {
        return {
            arr: [1]
        }
    },
    watch: {
        arr: {
            handler(newVal, oldVal) {
                ('new:', newVal)
                ('old:', oldVal)
            },
            immediate: true
        }
    },
    created() {
        // You can listen to ---directly assign the entire array         = [2]
        
        // Cannot listen ----index assignment, length modification        [1] = 2
        [0] = 2
         = 2
        
        // Listening can be triggered, but changes cannot be listened to. => that is, the new and old values ​​are the same.        (2)
        this.$set(, 0, 2)
    }
}

02. Computed attributes

(1) Set method for calculating attributes

• Computed properties can be written as an Object, not a Function, but the Function form is the get method we use by default. When written as Object, we can also use its set method

computed: {
  fullName: {
    get () {
      return `${} ${}`;
    },
    set (val) {
      const names = (' ');
       = names[0];
       = names[ - 1];
    }
  }
}

When executing = 'Aresn Liang', the computed set will be called, and firstName and lastName will be assigned as Aresn and Liang

computered can rely on other computers, or even data of other components

(2) Difference

• Compute properties and listeners
  • Computed attribute computed is: listen for changes in dependency values
    • As long as the dependency value remains unchanged, the cache will be read directly for multiplexing.
    • Computation properties cannot respond to changes in data during asynchronous operations
    • Need to call it manually
  • The listener watch is: listen for changes in attribute value
    • As long as the property value changes, a callback function can be triggered.
    • The listener can respond to changes in data during asynchronous operations
    • Automatically triggered
• Calculate properties and methods
  • methods is a method that can accept parameters, while computed cannot
  • computered can be cached, methods won't
    

(3) Use scenarios

• Computed is required when an attribute is affected by multiple attributes
• When a single data affects multiple data, you need to use a watch, such as searching for data

The above is the detailed content of the use of vue Watch and Computed. For more information on the use of vue Watch and Computed, please pay attention to my other related articles!