The use and difference of watch listening and computed calculation attributes

watch and computed The difference between ：

computed :

1. Supports caching , Only dependent data changes , To recalculate

2. Asynchronous is not supported , When computed Invalid if there is an asynchronous operation inside , Can't monitor data changes

     3.computed Property value will default to cache , Computational properties are cached based on their responsive dependencies , That is based on data The data stated in is calculated

     4. If an attribute is computed by another attribute , This property depends on other properties , It's a many to one or one to one , It's usually used computed

      5. If computed Property property value is a function , So default will go get Method ; The return value of the function is the property value of the property ; stay computed Medium , All attributes have one get And a set Method , When data changes , call set Method .

watch：

1. Caching is not supported , Data change , The corresponding operation will be triggered directly ;

     2.watch Asynchronous Support ;

     3. The listening function takes two parameters , The first parameter is the latest value ; The second parameter is the value before input ;

     4. When an attribute changes , The corresponding operation needs to be performed ; One to many ;

     5. If in data If there is no corresponding attribute in , Can not watch Of , This and computed Dissimilarity .

  Use in actual projects ：

watch：

Realization effect

Code illustration ： 

  watch:{
      'tableData.scienceStaffNumPer':{ //  Monitoring technicians input The number , Set radio buttons 
        //tableData.scienceStaffNumPer  yes data The value defined in 
        handler(val){
          if(!val){
            this.tableData.scienceStaffNumFlag = null
            return
          }
            var num =parseFloat(val) 
            if(num==0){
                this.tableData.scienceStaffNumFlag = '0'
            }
            if (num>0&&num<5) {
              this.tableData.scienceStaffNumFlag = '1'
            }
            if(num>=5&&num<10){
               this.tableData.scienceStaffNumFlag = '2'
            }
            if(num>=10){
               this.tableData.scienceStaffNumFlag = '3'
            }
        },
        deep:true, //  Listen now 
        immediate:true //  Deep monitoring 
      },
}

 computed：

demand ： The input box can only be entered 0-100 Number between , And keep two decimal places

 

Code illustration ：

  computed: {

     techInputData: { //  Scientific and technological personnel input The value entered in the input box 
     //techInputData  It means that computed A data defined in , This field is bound to input In the input box 
       computed There are two ways , One is set, One is get   get Return the calculated data 
        get() {
          var value = this.tableData.scienceStaffNumPer //  Assign the value of the input box to value
          if (Number(value)!==parseFloat(value)) { //  Determine whether the input is a number , If not , Returns an empty 
            return ''
          }
          if (value < 0) { //  If the value entered is less than 0
            return 0;
          } else if (value >= 100) { //  If the value entered is greater than or equal to 100
            return 100;
          } else {
            return value.toString().match(/^\d+(?:\.\d{0,2})?/) //  Only two decimal places can be entered 
          }
        },
        set(val) {  // set Indicates the calculated data   Set to   A certain value 
            //val  yes get  Calculated data 
          this.tableData.scienceStaffNumPer = val; //  Recalculate the processed value of the property , Assign to this input
        },
     },
}