目錄

• 前言
• 一、偵聽器的基本用法
• 二、偵聽器的格式
• 三、實現剛進入頁面就觸發監聽和深度監聽
  
• 深度監聽
• 深度監聽返回偵聽物件子屬性的值
• 最後
  

前言

通過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，當它們發生變化ClDrLZQseY的時候，就改變fullname的值。

二、偵聽器的格式

方法格式的偵聽器

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

物件格式的偵聽器

• 好處1：可以實現剛進入頁面，自動觸發!
• 好處2：可以實現深度監聽，也就是監聽物件中的屬性是否變化！

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

剛進入頁面就觸發監聽

通過新增immediate選項來實現

const vm = new Vue({
    el: '#app',data: www.cppcns.com
 
{
        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)
           www.cppcns.com
 
 },// 實現剛進入頁ClDrLZQseY面就觸發監聽
            immediate: true,// 實現深度監聽,只要物件中的任何一個屬性變化了，都會觸發“物件的偵聽”
            deep: true
        }
    }
})

深度監聽返回偵聽物件子屬性的值

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

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

最後

⚽本文介紹了Vue中的偵聽器的基本使用以及如何實現深度監聽，希望大家閱讀完有一定的收穫呦~

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