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

Posted on by

前言

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中的偵聽器的基本使用以及如何實現深度監聽，希望大傢閱讀完有一定的收獲呦~

到此這篇關於Vue中偵聽器基本用法的文章就介紹到這瞭,更多相關Vue偵聽器用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：