Vue中watch的高級用法

<template>
  <div>
      <input type="text" v-model="value">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value:null
      }
    },
    created(){
      this.test()
    },
    methods: {
      test(){
        console.log("第一個加載")
      }
    },
    watch: {
      value(val){
        this.test()
      }
      
    },  
  }
</script>

上面的代碼的效果是，頁面第一次加載需要調用test方法，每次輸入都要調用test方法

可以使用handler方法和immediate屬性進行優化

immediate:true代表如果在 wacth 里聲明了 test 之后，就會立即先去執行里面的handler方法，

如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執行。

    watch: {
      value:{
        handler:'test',
        immediate:true
      },
      
    },  

這樣可以每次輸入調用test方法，當然要是你需要每次拿到值也可以這樣寫

    watch: {
      value:{
        //handler:'test',
        handler(val){
          console.log(val)
        },
        immediate:true
      },
      
    },  

 

deep的用法

watch 里面還有一個屬性 deep，默認值是 false，代表是否深度監聽，比如我們 data 里有一個obj屬性：

<template>
  <div>
      <input type="text" v-model="obj.a">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value:null,
        obj:{
          a:null
        }
      }
    },
    created(){

    },
    methods: {
      test(){
        console.log("第一個加載")
      }
    },
    watch: {
      obj:{
         handler(val){
          console.log(val)
        },
        immediate:true,
      },
      
    },  
  }
</script>

 

當我們在在輸入框中輸入數據視圖改變obj.a的值時，我們發現是無效的

這時候可以使用deep

    watch: {
      obj:{
         handler(val){
          console.log(val)
        },
        immediate:true,
        deep:true
      }
}

 

也可以使用 字符串

    watch: {
      'obj.a':{
         handler(val){
          console.log(val)
        },
        immediate:true,
        deep:true
      },