vue-watch監聽的方法

在vue中，很多時候需要實時了解數據的變化執行相應的操作，通過watch監聽能實現相應需求。

<div>
      <p>inputOne: <input type="text" v-model="value1"></p>
      <p>inputTwo: <input type="text" v-model="valueObj.value2"></p>
</div> 

　　

1、注冊watch

export default {
    name: 'demo',
    watch: {
　　　　value1(newVlue, oldValue) {
　　　　　　this.value = newValue + 'bbb'
　　　　　　console.log(this.value）
　　　　}
　　},
    data() {
      return {
　　　　　　value: 'aaa',
          value1：'',
          valueObj: {
             value2: '',
          }
      }
    }        
} 

　　在inputOne輸入123后，監聽到value1的改變，打印出value的值：123bbb

 

2、handler方法

 watch中需要具體執行的方法，監聽數組或對象的屬性時用到的方法

 

watch: {
　　　　value1：{
                handler（newVal，oldVal）{
                    this.value = newVal + 'ccc'
                },
                immediate:true
           }
    },    

　　

3、immediate屬性

 

　　在選項參數中指定 immediate: true 將立即以表達式的當前值觸發回調，默認為false

 

 4、deep屬性

 

　　監聽對象或對象中的屬性，需要使用deep，即深度監聽。

　　在對象中層層遍歷，並在監聽對象上的每一個屬性上都添加監聽，當然這樣也會損耗性能

watch: {
　　　　valueObj：{
                handler（newVal，oldVal）{
                    this.value = newVal + ddd'
                },
                deep:true
           }
    },  
 
或者：直接監聽屬性，避免給所有屬性監聽而損耗性能。
　　watch: {
　　　　'valueObj.value2'：{
                handler（newVal，oldVal）{
                    this.value = newVal + 'eee'
                },
　　　　　　　　　　　immediate: true,　
                  deep:true
           }
    }, 

　　

5、watch監聽路由

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示來自於哪個界面
      if(to.path=="/home"){
        console.log("路由跳轉home");
      }
    }
  },