Vue中偵聽器怎么用

這篇文章將為大家詳細講解有關Vue中偵聽器怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

前言

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

一、偵聽器的基本用法

<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 } } })

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

二、偵聽器的格式

方法格式的偵聽器

• 缺點1：無法在剛進入頁面的時候，自動觸發！

• 缺點2：如果偵聽的是一個對象，如果屬性中的屬性發生了變化，不會觸發偵聽器！

對象格式的偵聽器

• 好處1：可以實現剛進入頁面，自動觸發!

• 好處2：可以實現深度監聽，也就是監聽對象中的屬性是否變化！

三、實現剛進入頁面就觸發監聽和深度監聽

剛進入頁面就觸發監聽

通過添加immediate選項來實現

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

深度監聽

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

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

深度監聽返回偵聽對象子屬性的值

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

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

關于“Vue中偵聽器怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。