🌵明晰Vue中的偵聽器

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

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

1、偵聽器的基本用法

<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的值。

2、偵聽器的格式

1. 方法格式的偵聽器
   • 缺點1：沒法在剛進入頁面的時候，自動觸發！
   • 缺點2：若是偵聽的是一個對象，若是屬性中的屬性發生了變化，不會觸發偵聽器！
2. 對象格式的偵聽器
   • 好處1：能夠實現剛進入頁面，自動觸發!
   • 好處2：能夠實現深度監聽，也就是監聽對象中的屬性是否變化！

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

剛進入頁面就觸發監聽

經過添加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中的偵聽器的基本使用以及如何實現深度監聽，但願你們閱讀完有必定的收穫呦~
⚾若是這篇文章對你有幫助的話，麻煩點贊收藏喲~
🏀GitHub 博客地址: github.com/Awu1227 。
🏉筆者還有其餘專欄，歡迎閱讀~
🏐玩轉CSS之美
🎳深刻淺出JavaScript