watch屬性監聽資料變化

watch監聽data中資料變化

watch屬性監聽data中指定資料的變化，來觸發對應處理函數

注意:newVal是資料變動後的值，oldVal是資料變動前的值

var vm=new Vue({
      el:'#app',
      data:{
          firstname:'',
          lastname:'',
          fullname:''
      },
      methods:{},
      watch:{                     
          firstname:function(newVal,oldVal){
              this.fullname = newVal+'-'+this.lastname
          },
          lastname:function(newVal,oldVal){
              this.fullname = this.firstname+'-'+newVal
          }
      }
});
           

watch深度監聽data中對象的變化

對象中的資料變化必須使用深度監聽，deep表示深度監聽辨別，handler為處理行為，不可寫錯

var vm=new Vue({
      el:'#app',
      data:{
          colors: [{color:'red'}]
      },
      watch:{  
         // 深度監視                   
        'colors':{
            deep:true,
            handler:function(newVal,oldVal){
                console.log(colors[0].newVal);
            }
        } 
      }
});
           

watch監聽路由位址的變化

watch可以監聽隐藏的資料變化，this.$route.path表示目前路由規則的URl

watch:{ 
     //this.$route.path    //目前路由位址
     '$route.path':function(newVal,oldVal){
           console.log(newVal+'-----'+oldVal);
      }
},