vue中watch的實戰用法

Vue.js 有一個方法 watch，它可以用來監測Vue實例上的數據變動。

如果對應一個對象，鍵是觀察表達式，值是對應回調，值也可以是方法名，或者是對象，包含選項。

1.簡單用法，監聽data裏面的數據

下面這個就淺顯易懂了，通過watch來直接監測demo，如果demo的值變化，value的值也會跟着一起變化。

<template>
  <div>
   <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

2.配合計算屬性(computed)監聽對象裏面的鍵值對

下面這個例子，如果watch監測的是一個對象的話，直接使用watch是不行的，此時我們可以藉助於computed計算屬性來完成。

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
       //也可監聽vuex
       // return this.$store.state.demo;
       // return this.$store.getters.getDemo;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

3.深度監聽直接監聽對象裏面的鍵值對

<template>
    <div id="app">
      <input type="text" v-model="childrens.name" />
      <input type="text" v-model="lastName" />
    </div>
</template>
<script>
  export default {
    name: 'index',
    data: {
      childrens: {
        name: '小強',
        age: 20,
        sex: '男'
      },
      tdArray:["1","2"],
      lastName:"張三"
    },
    watch:{
       //對象內部的屬性監聽，也叫深度監聽
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true
      },
        //鍵路徑必須加上引號
      'childrens.name':function(val,oldval){
        console.log(val+"aaa")
      },
        //也可直接監聽vuex
      '$store.getters.getOpenIndex': {
          handler(newV, oldV) {
              this.idx = newV
          },
          deep: true
      },
        //以V-model綁定數據時使用的數據變化監測
      lastName:function(val,oldval){
        console.log(this.lastName)
      }
    },
  }
   //主動調用$watch方法來進行數據監測
  vm.$watch("lastName",function(val,oldval){
    console.log(val)
  })
</script>

4.watch監聽失效解決辦法(immediate)

immediate表示在watch中首次綁定的時候，是否執行handler，值爲true則表示在watch中聲明的時候，就立即執行handler方法，值爲false，則和一般使用watch一樣，在數據發生變化的時候才執行
像上面方式使用watch時有一個特點，就是當值第一次綁定的時候，不會執行監聽函數，只有值發生改變纔會執行。如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。

比如當父組件向子組件動態傳值時，子組件props首次獲取到父組件傳來的默認值時，也需要執行函數，此時就需要將immediate設爲true。

watch: {
    '$route': {
        immediate:true,
            handler(newName, oldName) {
            console.log('$route has changed');
        },
    },
     //或
     name(newV, oldV) {
      // ...
        immediate:true
    }
},

參考鏈接1

參考鏈接2