快捷導(dǎo)航

Vue基礎(chǔ)之偵聽器詳解

更新時(shí)間：2021年12月06日 16:22:38 作者：DomCode

這篇文章主要為大家介紹了Vue基礎(chǔ)之偵聽器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

vue中什么是偵聽器

開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個(gè)數(shù)據(jù)可以通過插值語法等方式綁定到templat中。
當(dāng)數(shù)據(jù)變化的時(shí)候，template里綁定的數(shù)據(jù)會自動(dòng)進(jìn)行更新來顯示最新的數(shù)據(jù)。但是這種變化是在template中自動(dòng)偵聽data的值來進(jìn)行變換的
在某些情況下，我們希望在代碼邏輯中監(jiān)聽某個(gè)數(shù)據(jù)的變化，這個(gè)時(shí)候就需要用到偵聽器watch了

官方定義：Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。

一個(gè)對象，鍵是要偵聽的響應(yīng)式 property——包含了 data 或 computed property，而值是對應(yīng)的回調(diào)函數(shù)。值也可以是方法名，或者包含額外選項(xiàng)的對象。組件實(shí)例將會在實(shí)例化時(shí)調(diào)用 $watch()，參閱 $watch，以了解更多關(guān)于 deep、immediate 和 flush 選項(xiàng)的信息

偵聽器的用法

選項(xiàng)：watch

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

偵聽器watch的配置選項(xiàng)：

默認(rèn)情況下，watch只是在偵聽數(shù)據(jù)的引用變化，對于數(shù)據(jù)內(nèi)部屬性的變化是不會做出響應(yīng)的：

這個(gè)時(shí)候我們可以使用一個(gè)選項(xiàng)deep進(jìn)行更深層的偵聽；另外一個(gè)屬性，是希望一開始的就會立即執(zhí)行一次：這個(gè)時(shí)候我們使用immediate選項(xiàng)；這個(gè)時(shí)候無論后面數(shù)據(jù)是否有變化，偵聽的函數(shù)都會有限執(zhí)行一次；

data的內(nèi)容：

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

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

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

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

具體$watch可以查看官方的API查看（用的方式比較少）：實(shí)例方法 | 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',
    // 該回調(diào)會在任何被偵聽的對象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 偵聽單個(gè)嵌套 property
    'c.d': function (val, oldVal) {
      // do something
    },
    // 該回調(diào)將會在偵聽開始之后被立即調(diào)用
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // 你可以傳入回調(diào)數(shù)組，它們會被逐一調(diào)用
    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

目標(biāo): 可以偵聽data/computed屬性值改變

語法:

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

例子代碼：

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

小結(jié): 想要偵聽一個(gè)屬性變化, 可使用偵聽屬性watch

vue偵聽器-深度偵聽和立即執(zhí)行

目標(biāo): 可以偵聽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
      }
    }
  },
  // 目標(biāo): 偵聽對象
  /*
  語法:
    watch: {
      變量名 (newVal, oldVal){
        // 變量名對應(yīng)值改變這里自動(dòng)觸發(fā)
      },
      變量名: {
        handler(newVal, oldVal){
        },
        deep: true, // 深度偵聽(對象里面層的值改變)
        immediate: true // 立即偵聽(網(wǎng)頁打開handler執(zhí)行一次)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的對象
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style>
</style>

小結(jié): immediate立即偵聽, deep深度偵聽, handler固定方法觸發(fā)