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");
      }
    }
  },