A brief talk about calculated properties and property listening in Vue

 computed: {
     "Computed Property Name" () {
         return "value"
     }
 }

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // Computed properties:
  // Scenario: The value of a variable needs to be calculated using another variable/*
    grammar:
    computed: {
      ComputedPropertyName() {
        return value}
    }
  */
 // Note: Both computed and data attributes are variables - they cannot have the same name // Note 2: If a variable changes within a function, the result will be automatically recalculated and returned computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

 get(){
                console.log('get was called')
                // console.log(this) // this here is vm (Vue instance)
                return this.firstName + '-' + this.lastName
            },
            

  ...
  computed:{
      fullName:
          //What is the function of get? When someone reads fullName, get is called, and the return value is used as the value of fullName. //When is get called? 1. When fullName is read for the first time. 2. When the data it depends on changes.
          get(){
              console.log('get was called')
              // console.log(this) //This is vm
              return this.firstName + '-' + this.lastName
          },
          //When is set called? When fullName is modified.
          set(value){
              console.log('set',value)
              const arr = value.split('-')
              this.firstName = arr[0]
              this.lastName = arr[1]
          }
      }
  }
})    

<!-- When binding an event: @xxx="yyy" yyy can write some simple statements -->
<button @click="isHot = !isHot">Switch weather</button>

      ...
      //Writing method 1. Pass in watch configuration to listen to ishot attribute watch:{
          isHot:{
              immediate:true, //Let the handler call during initialization //When will the handler be called? When isHot changes.
              
              handler(newValue,oldValue){
                  console.log('isHot has been modified', newValue, oldValue)
              }
          }
      }
  })
  
  
  // Method 2. Monitor via vm.$watch('isHot',{
   immediate:true, //Let the handler call during initialization, the default is false
   //When is the handler called? When isHot changes.
   handler(newValue,oldValue){ // There are two parameters, one is the new value and the other is the old value console.log('isHot has been modified',newValue,oldValue)
   }
})

data:{
	isHot:true,
	numbers:
		a:1,
		b:1
	}
},
watch:{
	// Monitor the change of a certain attribute in a multi-level structure (the original writing method needs to add quotation marks, and the abbreviation can be omitted, but in this case it must be added, otherwise an error will be reported)
	/* 'numbers.a': {
		handler(){
			console.log('a has been changed')
		}
	} */
	//Monitor the changes of all attributes in the multi-level structure numbers:{
		deep:true, // If this is not enabled, then the monitoring is whether the address of numbers has changed handler(){
			console.log('numbers changed')
		}
	}
}

watch:{
	isHot(newValue,oldValue){
		console.log('isHot has been modified',newValue,oldValue,this)
	}
}

/* vm.$watch('isHot',function (newValue,oldValue) {
	console.log('isHot has been modified',newValue,oldValue,this)
}) */

watch:{
	firstName(val){
		setTimeout(()=>{
			console.log(this) //vue instance object, if a normal function is used, it returns Window
			this.fullName = val + '-' + this.lastName
		},1000);
	},
	lastName(val){
		this.fullName = this.firstName + '-' + val
	}
}