watch监听和computed计算属性的使用和区别

watch和computed的区别：

computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

     3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的

     4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

      5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch：

1. 不支持缓存，数据变，直接会触发相应的操作；

     2.watch支持异步；

     3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

     4.当一个属性发生变化时，需要执行对应的操作；一对多；

     5.如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。

 实际项目中的使用：

watch：

实现效果

代码示意： 

  watch:{
      'tableData.scienceStaffNumPer':{ // 监听科技人员input数值，设置单选按钮
        //tableData.scienceStaffNumPer 是data中定义的值
        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, // 立即进行监听
        immediate:true // 深度监听
      },
}

 computed：

需求：输入框只能输入0-100之间的数字，并且保留两位小数

 

代码示意：

  computed: {

     techInputData: { // 科技人员input输入框输入的值
     //techInputData 表示在computed中定义的一个数据，这个字段绑定到input输入框中
       computed有两个方法，一个是set，一个是get   get返回这个计算好的数据
        get() {
          var value = this.tableData.scienceStaffNumPer // 将输入框的值赋值给value
          if (Number(value)!==parseFloat(value)) { // 判断输入的是否是数字,如果不是，返回空
            return ''
          }
          if (value < 0) { // 如果输入的值小于0
            return 0;
          } else if (value >= 100) { // 如果输入的值大于等于100
            return 100;
          } else {
            return value.toString().match(/^\d+(?:\.\d{0,2})?/) // 只能输入小数点后两位
          }
        },
        set(val) {  // set表示将计算好的数据 设置给 某个值
            //val 是get 计算好后的数据
          this.tableData.scienceStaffNumPer = val; // 重新将计算属性处理过的值，赋值给这个input
        },
     },
}