Vue?watch監(jiān)聽使用的幾種方法

更新時間：2022年12月22日 10:31:25 作者：script~

watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務中是很常用。在面試時，也是必問知識點，一般會用作和computed進行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)

一、watch使用的幾種方法

1、通過 watch 監(jiān)聽 msg 數(shù)據(jù)的變化。

watch: {
    msg(oldValue, newValue) {
        console.log(oldValue)
        console.log(newValue)
    }
}

2、通過 watch 監(jiān)聽 obj數(shù)據(jù)的變化。（深度監(jiān)聽 deep）

data（） {
    return {
        obj: {
            'name': "趙",
            'age': 18
        },
    }
},
watch: {
    obj: {
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true  // 深度監(jiān)聽
    }
}

3、通過 watch 監(jiān)聽 data 數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時,執(zhí)行 change 方法

watch: {
    data： 'change' // 值可以為methods的方法名
}，
methods: {
    change(oldVal,newVal){
　　　console.log(oldVal,newVal)
　 }
}

二、watch中的immediate與handler和deep屬性

1、immediate屬性

使用watch時有一個特點，就是當值第一次綁定時，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變時才會執(zhí)行。如果我們需要在最初綁定值的時候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

2、handler屬性

watch中需要具體執(zhí)行的方法

3、deep屬性

當需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，此時就需要deep屬性對對象進行深度監(jiān)聽，數(shù)組字符串一般不需要

data（） {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        // 執(zhí)行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度監(jiān)聽
        immediate: true  // 第一次改變就執(zhí)行
    }
   // 如果只需要監(jiān)聽對象中的一個屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對象屬性：
    'obj.name': {
        // 執(zhí)行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度監(jiān)聽
        immediate: true  // 第一次改變就執(zhí)行
    }
}

到此這篇關于Vue watch監(jiān)聽使用的幾種方法的文章就介紹到這了,更多相關Vue watch監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue watch監(jiān)聽變量值的實時變動示例詳解
這篇文章主要介紹了vue 監(jiān)聽變量值的實時變動 watch,使用字符串形式的偵聽器函數(shù),還有一種是使用函數(shù)形式的偵聽器函數(shù),本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2023-08-08
Vue中el-table條件渲染防止樣式亂掉(解決方法)
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧
2023-11-11
vue使用screenfull插件實現(xiàn)全屏功能
這篇文章主要為大家詳細介紹了vue使用screenfull插件實現(xiàn)全屏功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
vue+elementui 實現(xiàn)上傳文件/導入文件的功能示例詳解
文章介紹了如何使用Vue和Element UI實現(xiàn)上傳文件和導入文件的功能,主要內(nèi)容包括：上傳組件的使用、data中的數(shù)據(jù)存儲、methods中的方法（選擇文件、點擊確定上傳文件、刪除文件）,文章還提供了相關鏈接供進一步學習,感興趣的朋友一起看看吧
2025-03-03
vue?elementui?實現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
教你用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果
最近做的兩個項目都是關于vue的,做完整理一下,這篇文章主要給大家介紹了關于如何用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
Vue不能檢測到數(shù)據(jù)變化的幾種情況說明
這篇文章主要介紹了Vue不能檢測到數(shù)據(jù)變化的幾種情況說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue使用Antd中a-table實現(xiàn)表格數(shù)據(jù)列合并展示示例代碼
文章介紹了如何在Vue中使用Ant?Design的a-table組件實現(xiàn)表格數(shù)據(jù)列合并展示,通過處理函數(shù)對源碼數(shù)據(jù)進行操作,處理相同數(shù)據(jù)時合并列單元格
2024-11-11
vue路由中前進后退的一些事兒
這篇文章主要給大家介紹了關于vue路由中前進后退的一些事兒，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue路由具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-05-05
Vue+Element實現(xiàn)表格單元格編輯
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04