目錄

• 中什麼是偵聽器
• 偵聽器的用法
• vue偵聽器-watch
• vue偵聽器-深度偵聽和立即執行
• 總結

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.

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 改變時被呼叫，不論www.cppcns.com其被巢狀多深
    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固定方客棧法觸發

總結

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