快捷導(dǎo)航

Vue中偵聽(tīng)器的基本用法示例

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

隨著Vue的使用越來(lái)越多,對(duì)Vue的其他知識(shí)點(diǎn)也開(kāi)始逐漸多了解一點(diǎn),這次做頁(yè)面上的計(jì)算,用了Watch偵聽(tīng)器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽(tīng)器基本用法的相關(guān)資料,需要的朋友可以參考下

前言

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

一、偵聽(tīng)器的基本用法

<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)聽(tīng)firstName和fullName，當(dāng)它們發(fā)生變化的時(shí)候，就改變fullname的值。

二、偵聽(tīng)器的格式

方法格式的偵聽(tīng)器

缺點(diǎn)1：無(wú)法在剛進(jìn)入頁(yè)面的時(shí)候，自動(dòng)觸發(fā)！
缺點(diǎn)2：如果偵聽(tīng)的是一個(gè)對(duì)象，如果屬性中的屬性發(fā)生了變化，不會(huì)觸發(fā)偵聽(tīng)器！

對(duì)象格式的偵聽(tīng)器

好處1：可以實(shí)現(xiàn)剛進(jìn)入頁(yè)面，自動(dòng)觸發(fā)!
好處2：可以實(shí)現(xiàn)深度監(jiān)聽(tīng)，也就是監(jiān)聽(tīng)對(duì)象中的屬性是否變化！

三、實(shí)現(xiàn)剛進(jìn)入頁(yè)面就觸發(fā)監(jiān)聽(tīng)和深度監(jiān)聽(tīng)

剛進(jìn)入頁(yè)面就觸發(fā)監(jiān)聽(tīng)

通過(guò)添加immediate選項(xiàng)來(lái)實(shí)現(xiàn)

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

深度監(jiān)聽(tīng)

在上述代碼中，當(dāng)username發(fā)生變化時(shí)我們是不能監(jiān)聽(tīng)成功的，因?yàn)樽兓氖菍?duì)象屬性的值，因此需要深度監(jiān)聽(tīng)，添加deep選項(xiàng)即可

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

深度監(jiān)聽(tīng)返回偵聽(tīng)對(duì)象子屬性的值

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

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