Vue基礎之偵聽器詳解

Posted on by

vue中什麼是偵聽器

  • 開發中我們在data返回的對象中定義瞭數據，這個數據可以通過插值語法等方式綁定到templat中。
  • 當數據變化的時候，template裡綁定的數據會自動進行更新來顯示最新的數據。但是這種變化是在template中自動偵聽data的值來進行變換的
  • 在某些情況下，我們希望在代碼邏輯中監聽某個數據的變化，這個時候就需要用到偵聽器watch瞭

官方定義：Vue 通過 watch 選項提供瞭一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

一個對象，鍵是要偵聽的響應式 property——包含瞭 data 或 computed property，而值是對應的回調函數。值也可以是方法名，或者包含額外選項的對象。組件實例將會在實例化時調用 $watch()，參閱 $watch，以瞭解更多關於 deep、immediate 和 flush 選項的信息

偵聽器的用法

選項：watch

類型：{ [key: string]: string | Function | Object | Array}

偵聽器watch的配置選項：

默認情況下，watch隻是在偵聽數據的引用變化，對於數據內部屬性的變化是不會做出響應的：

這個時候我們可以使用一個選項deep進行更深層的偵聽；另外一個屬性，是希望一開始的就會立即執行一次：這個時候我們使用immediate選項；這個時候無論後面數據是否有變化，偵聽的函數都會有限執行一次；

data的內容：

data() {
    return {
        info: {
            name: 'cgj'
        }
    }
}
watch: {
    info: {
        handler(newValue, oldValue) {
            console.log(newValue, oldValue)    
        }
        deep: true,
        immediate: true,
    }
}

另外一個是Vue3文檔中沒有提到的，但是Vue2文檔中有提到的是偵聽對象的屬性：

'info.name': function(newValue, oldValue) {
    console.log(newValue, oldValue)
}

還有另外一種方式就是使用 $watch 的API：

具體$watch可以查看官方的API查看（用的方式比較少）：實例方法 | Vue.js

const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // 偵聽頂級 property
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // 字符串方法名
    b: 'someMethod',
    // 該回調會在任何被偵聽的對象的 property 改變時被調用，不論其被嵌套多深
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 偵聽單個嵌套 property
    'c.d': function (val, oldVal) {
      // do something
    },
    // 該回調將會在偵聽開始之後被立即調用
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // 你可以傳入回調數組，它們會被逐一調用
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 triggered')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle 1 triggered')
    }
  }
})
const vm = app.mount('#app')
vm.a = 3 // => new: 3, old: 1

vue偵聽器-watch

目標: 可以偵聽data/computed屬性值改變

語法:

watch: {
    "被偵聽的屬性名" (newVal, oldVal){
    }
}

例子代碼：

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>
<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目標: 偵聽到name值的改變
  /*
  語法:
    watch: {
      變量名 (newVal, oldVal){
        // 變量名對應值改變這裡自動觸發
      }
    }
  */
  watch: {
    // newVal: 當前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>
<style>
</style>

小結: 想要偵聽一個屬性變化, 可使用偵聽屬性watch

vue偵聽器-深度偵聽和立即執行

目標: 可以偵聽data/computed屬性值改變

語法:

watch: {
    "被偵聽的屬性名" (newVal, oldVal){
    }
}

例子代碼:

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目標: 偵聽對象
  /*
  語法:
    watch: {
      變量名 (newVal, oldVal){
        // 變量名對應值改變這裡自動觸發
      },
      變量名: {
        handler(newVal, oldVal){
        },
        deep: true, // 深度偵聽(對象裡面層的值改變)
        immediate: true // 立即偵聽(網頁打開handler執行一次)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // user裡的對象
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style>
</style>

小結: immediate立即偵聽, deep深度偵聽, handler固定方法觸發

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：