vue的计算属性computed与监听属性watch

计算属性是vue里面一个很常见的属性，相当于data里面有一个特殊的变量，这个变量绑定一个其他值，当其他值变化的时候他会执行一个函数，然后将这个变量的值等同于这个函数的返回值，这些函数都写在计算属性computed里面
监听属性是用来监听数据的变化的，当他监听的数据发生变化的时候执行一个函数，这些函数都放到watch里面

const vm =new Vue({
       el:"#root",
       data:{
       },
       computed:{//计算属性
       },
       methods:{
       },
       watch:{//监听属性
       }
   })

我们现在有一个要求，点击一个按钮，切换天气为凉爽或者炎热，分别用computed实现和watch实现

今天天气很好{{info}}
<button @click="showInfo">切换天气</button>
<button @click="numbers.a++">a++</button>

第一步是在值，判断现在的天气是啥

data:{
  isHot:true,
},

第二步点击按钮，给按钮赋值，切换isHot的属性

methods:{
   showInfo(e){
        this.isHot=!this.isHot
    },
},

用computed实现
计算属性增加一个绑定的值，当isHot发生变化的时候，切换info的值为炎热或者凉爽

 info(){//计算属性，这个也是相当于值info
   return this .isHot ?'炎热':'凉爽'//返回炎热或者凉爽给info，dom树再调用info
}

我们也可以用watch监听属性来实现

watch:{//检测函数
      'isHot':{
          //当isHot发生改变的时候调用
          // immediate:true,//初始化的时候让handler调用一下
          handler(newValue,oldValue){
              //newValue,oldValue新变化的值，之前的值
              console.log('isHot被修改了')
          }
      }
 }

watch相比于cmputed，多了对异步的计算

watch还可以监视整个数组或者数组里面其中一个值的变化

//多层结构的监视
'numbers.a':{
    handler(){
        console.log("a的值改变了")
    } 
},
'numbers':{//vue是默认 watch是不可以监测到这个东西的改变的
    deep:true,//配置这个后就可以监测到对象内部的改变了
    handler(){
        console.log("number的值改变了")
    }
},
//简写，要是你不配其他设置可以用简写的方式省代码
numbers(){//vue是默认 watch是不可以监测到这个东西的改变的
    // 简写的代价就是不能写deep之类的配置了
    console.log("number的值改变了")
    
}

我们也可以对整个vue来监视其中的内容来实现监视的效果

也可以直接监视整个vm来实现
vm.$watch('isHot',{ //监视isHot并在监视成功的时候调用这个函数
     handler(newValue,oldValue){
         //newValue,oldValue新变化的值，之前的值
         console.log('isHot被修改了')
     }
 })