首先要知道vue的watch(偵聽器),偵聽某屬性,當屬性發生變化時執行對應的操作函式.

watch:{
    attributeName:function(){
        //偵聽到屬性變化後的具體操作
    }
}

先看一個demo:

<template>
  <div class="hello">
    <input type="text" v-model="test.name" @click="cChange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      test:{
        name:'zsy'
      }
    }
  },
  watch:{
    test:function(){
      console.log('test改變了');
    }
  },
  methods:{
    cChange:function(){
      this.test.name = 'fuck'
    }
  }
}
</script>
 

偵聽一個object型別的屬性,當改變它的一個鍵值時並沒有改變偵聽的該屬性的地址,因此並不會觸發偵聽的執行函式.Array型別的同樣如此.如果想實現預期的偵聽操作則需要用到深度偵聽了

watch偵聽屬性其實還有三個引數:

handler:回撥函式,兩個引數分別為所偵聽的屬性的 新值 和 舊值

depp: Boolean型別,是否深度偵聽,即是否偵聽物件內部值的變化(此引數則是本部落格的核心

immediate:Boolean型別,是否立即呼叫(此處要說明一下,偵聽器第一次繫結上時是不會立即執行的,只有當屬性發生變化時才會觸發),而此引數設定為true時第一次繫結偵聽器時便會觸發

<template>
  <div class="hello">
    <input type="text" v-model="test.name" @click="cChange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      test:{
        name:'zsy'
      }
    }
  },
  watch:{
    test:{
      handler:function(newVal, oldVal){
        console.log('test改變了',newVal,oldVal);
      },
      deep:true,        //深度監聽
      immediate:true    //初次繫結執行回撥
    }
  },
  methods:{
    cChange:function(){
      this.test.name = 'fuck'
    }
  }
}
</script>