快捷導(dǎo)航

一文搞懂Vue中watch偵聽器的用法

更新時(shí)間：2023年11月02日 09:56:30 作者：森呼吸。

在Vue.js中,您可以使用watch選項(xiàng)來創(chuàng)建偵聽器,以偵聽特定屬性的變化,偵聽器可以在屬性發(fā)生變化時(shí)執(zhí)行相關(guān)的邏輯,本文給大家詳細(xì)講講Vue中watch偵聽器的用法,需要的朋友可以參考下

pre	sync	post
組件更新前執(zhí)行（默認(rèn)）	強(qiáng)制效果始終同步觸發(fā)	組件更新后執(zhí)行

1. 監(jiān)聽Ref 案例

import { ref, watch } from 'vue'

let message = ref({
    nav:{
        bar:{
            name:""
        }
    }
})

watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
},{
    immediate:true,
    deep:true
})

監(jiān)聽多個(gè)ref 注意變成數(shù)組

import { ref, watch ,reactive} from 'vue'

let message = ref('')
let message2 = ref('')

watch([message,message2], (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
})

2. 監(jiān)聽Reactive

使用reactive監(jiān)聽深層對(duì)象開啟和不開啟deep 效果一樣

import { ref, watch ,reactive} from 'vue'

let message = reactive({
    nav:{
        bar:{
            name:""
        }
    }
})

watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
})

監(jiān)聽reactive 單一值

import { ref, watch ,reactive} from 'vue'

let message = reactive({
    name:"",
    name2:""
})

watch(()=>message.name, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
}

以上就是一文搞懂Vue中watch偵聽器的用法的詳細(xì)內(nèi)容，更多關(guān)于Vue watch偵聽器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)搜索小功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue3中v-model的原理示例詳解
原生 JavaScript 實(shí)現(xiàn),模擬 Vue 3 的 v-model 功能,包括表單元素和組件支持,我們將逐步構(gòu)建代碼,并提供使用示例,對(duì)vue v-model原理解析感興趣的朋友一起看看吧
2025-04-04
Vue?中ref()和?reactive()響應(yīng)式數(shù)據(jù)的使用方法
article介紹Vue3中ref()和reactive()函數(shù)的使用方法,ref()用于創(chuàng)建基本數(shù)據(jù)類型的響應(yīng)式引用,reactive()用于創(chuàng)建響應(yīng)式對(duì)象,本文介紹Vue中ref()和reactive()響應(yīng)式數(shù)據(jù)的使用方法,感興趣的朋友一起看看吧
2025-01-01
詳解uniapp如何解決H5頁面雙標(biāo)題
Uniapp打包到線上,會(huì)出現(xiàn)雙標(biāo)題問題,原因是：通過地址鏈接訪問時(shí),會(huì)有個(gè)瀏覽器自身的標(biāo)題,和uniapp自身的導(dǎo)航欄標(biāo)題重復(fù),本文給大家介紹了uniapp如何解決H5頁面雙標(biāo)題,需要的朋友可以參考下
2024-10-10
vue3如何實(shí)現(xiàn)在style中使用響應(yīng)式變量
vue3已經(jīng)內(nèi)置了這個(gè)功能啦,可以在style中使用v-bind指令綁定script模塊中的響應(yīng)式變量,這篇文章我們來講講vue是如何實(shí)現(xiàn)在style中使用script模塊中的響應(yīng)式變量,感興趣的朋友一起看看吧
2024-07-07
Vue3中vuex的基本使用方法實(shí)例
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于Vue3中vuex的基本使用方法,需要的朋友可以參考下
2022-04-04
解決創(chuàng)建vue項(xiàng)目后沒有vue.config.js文件的問題
這篇文章給大家主要介紹如何解決創(chuàng)建vue項(xiàng)目后沒有webpack.config.js(vue.config.js)文件，文中有詳細(xì)的解決方法，感興趣的朋友可以參考閱讀下
2023-07-07
Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表前端導(dǎo)出問題分析
最近遇到個(gè)問題,后臺(tái)一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表前端導(dǎo)出問題,感興趣的朋友一起看看吧
2023-10-10