Vue中偵聽器的基本用法示例

更新時間：2021年08月06日 12:38:50 作者：_啊嗚

隨著Vue的使用越來越多,對Vue的其他知識點也開始逐漸多了解一點,這次做頁面上的計算,用了Watch偵聽器,這篇文章主要給大家介紹了關于Vue中偵聽器基本用法的相關資料,需要的朋友可以參考下

前言

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

一、偵聽器的基本用法

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
el: '#demo',
data: { 
    firstName: 'Foo', 
    lastName: 'Bar', 
    fullName: 'Foo Bar' }, 
watch: { 
    firstName: function (val) { 
        this.fullName = val + ' ' + this.lastName }, 
    lastName: function (val) { 
        this.fullName = this.firstName + ' ' + val } } })

這段代碼的作用就是監(jiān)聽firstName和fullName，當它們發(fā)生變化的時候，就改變fullname的值。

二、偵聽器的格式

方法格式的偵聽器

缺點1：無法在剛進入頁面的時候，自動觸發(fā)！
缺點2：如果偵聽的是一個對象，如果屬性中的屬性發(fā)生了變化，不會觸發(fā)偵聽器！

對象格式的偵聽器

好處1：可以實現剛進入頁面，自動觸發(fā)!
好處2：可以實現深度監(jiān)聽，也就是監(jiān)聽對象中的屬性是否變化！

三、實現剛進入頁面就觸發(fā)監(jiān)聽和深度監(jiān)聽

剛進入頁面就觸發(fā)監(jiān)聽

通過添加immediate選項來實現

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            // 實現剛進入頁面就觸發(fā)監(jiān)聽
            immediate: true
        }
    }
})

深度監(jiān)聽

在上述代碼中，當username發(fā)生變化時我們是不能監(jiān)聽成功的，因為變化的是對象屬性的值，因此需要深度監(jiān)聽，添加deep選項即可

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            // 實現剛進入頁面就觸發(fā)監(jiān)聽
            immediate: true,
            // 實現深度監(jiān)聽,只要對象中的任何一個屬性變化了，都會觸發(fā)“對象的偵聽”
            deep: true
        }
    }
})

深度監(jiān)聽返回偵聽對象子屬性的值

上述代碼中執(zhí)行結果是打印info這個對象，我們希望打印的username的值，需要加上newVal.username還是比較麻煩的，我們其實可以直接監(jiān)聽并打印變化子屬性的值，只需要在要監(jiān)聽的子屬性外面加上一層單引號即可：

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        'info.username': {
            handle(newVal){
                console.log(newVal)
            }
        }
    }
})