watch选项

watch选项用于监控数据变化，一种是直接在构造器内用watch选项，一种是为了避免耦合度在构造器外使用

<div id="app">
         <p>今日温度是：{{temperature}}℃</p>
         <p>今日穿衣建议是：{{clothingAdvice}}</p>
         <button @click="raiseTemperature">升高温度</button>
         <button @click="reduceTemperature">降低温度</button>
     </div>
     <script>
         var clothingAdvice=['T恤','夹克','棉服']
         //在实际开发中一般是采用这种数组写法直接从数据库调
         var app = new Vue({
             el:'#app',
             data:{
                 temperature:14,
                 clothingAdvice:'夹克'
             },
             methods:{
                raiseTemperature:function(){
                    this.temperature+=5;
                },
                reduceTemperature:function(){
                    this.temperature-=5;
                }
            },
             watch:{
                 //注意watch这里需要两个参数，一个是新的值(newVal),一个是旧的值(oldVal)
                 temperature:function(newVal,oldVal){
                     if(this.temperature>=20){
                         this.clothingAdvice=clothingAdvice[0];
                     }
                     else if(this.temperature>=0&&this.temperature<20){
                         this.clothingAdvice=clothingAdvice[1];
                     }
                     else this.clothingAdvice=clothingAdvice[2];
                 }
            }
         })
      </script>

---

//要写在构造器下面，因为用到实例化app
app.$watch('temperature',function(newVal,oldVal){
        if(this.temperature>=20){
            this.clothingAdvice=clothingAdvice[0];
        }
        else if(this.temperature>=0&&this.temperature<20){
            this.clothingAdvice=clothingAdvice[1];
        }
        else this.clothingAdvice=clothingAdvice[2];
        })