2021-05-20computed and watch applications and differences

VUE And computed and watch Application and difference Catalog ：
** watch and computed**

conputed effect ：
Calculate the result and return , Triggered only when the calculated value changes
( namely ： The results of the calculated properties are cached , Recalculate only if the dependent reactive property changes , Has dependent properties .
( If you are in the name Method to print the time new Data() Multiple prints are the same , because new Data() Not dependent data )

new Vue({
    
    el: '#id',
    template: `<div> <span>Name: {
     {name}}<span> </div>`,
    data: {
    
        firstName: 'Leo',
        lastName: 'Alan'
    },
    computed: {
    
        name () {
    
            return `${
      this.firstName} + ${
      this.lastName}`
        }
    }
})

watch effect ：
Listen for a value , When the value being monitored changes , Perform the corresponding operation , For example, the following single listening value , And then change data Or do other operations
( And computed Is the difference between the ,watch It is more suitable for monitoring the change of a certain value and doing corresponding operations , For example, request background interface , and computed It is applicable to calculating the existing value and returning the result )
( If you are in the name Print under method new Data（） Printing many times is different , because watch A muscle , Update every time )

new Vue({
    
    el: '#id',
    template: `<div> // ... </div>`,
    data: {
    
        firstName: 'Leo',
        lastName: 'Alan',
        obj1: {
    
            a: 0
        }
    },
    watch: {
    
        //  monitor firstName, When firstName This function is executed when changes occur 
        firstName () {
    
            //  Perform the required actions ...
            //  notes : Initialization does not execute , Only if the monitored value (firstName) Only when changes occur 
        },

        //  monitor lastName
        lastName: {
    
            handler (newName, oldName) {
    
                //  Perform the required actions ...
            },
            immediate: true // true:  During initialization, the corresponding operation of the listening will be executed first  
        },

        obj1: {
    
            handler () {
    
                //  Perform the required actions ...
            },
            deep: true //  The default value of this property is false. 
            //  When the monitored value is an object , Only deep by true when , The value of the corresponding attribute (obj1.a) The listening event can only be triggered when a change occurs , But this is very performance consuming 
        },

        //  Listen for specific properties of the object , deep You don't need to set it to true 了 
        'obj1.a': {
    
            handler () {
    
                //  Perform the required actions ...
            }
        }

    }
})

Be careful ： Not in computed and watch The modification in is dependent ( Or be monitored ) Value , This may lead to an infinite loop