一文搞懂Vue中watch偵聽器的用法
更新時間：2023年11月02日 09:56:30 作者：森呼吸。
在Vue.js中,您可以使用watch選項來創(chuàng)建偵聽器,以偵聽特定屬性的變化,偵聽器可以在屬性發(fā)生變化時執(zhí)行相關的邏輯,本文給大家詳細講講Vue中watch偵聽器的用法,需要的朋友可以參考下
watch 需要偵聽特定的數據源，并在單獨的回調函數中執(zhí)行副作用
watch第一個參數監(jiān)聽源
watch第二個參數回調函數cb（newVal,oldVal）
watch第三個參數一個options配置項是一個對象{
immediate:true //是否立即調用一次
deep:true //是否開啟深度監(jiān)聽
flush:“pre” // 更新時機
}
flush配置項
| pre | sync | post |
|---|---|---|
| 組件更新前執(zhí)行（默認） | 強制效果始終同步觸發(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)聽多個ref 注意變成數組
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)聽深層對象開啟和不開啟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偵聽器的用法的詳細內容，更多關于Vue watch偵聽器的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了vue實現搜索小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
原生 JavaScript 實現,模擬 Vue 3 的 v-model 功能,包括表單元素和組件支持,我們將逐步構建代碼,并提供使用示例,對vue v-model原理解析感興趣的朋友一起看看吧2025-04-04
Vue?中ref()和?reactive()響應式數據的使用方法
article介紹Vue3中ref()和reactive()函數的使用方法,ref()用于創(chuàng)建基本數據類型的響應式引用,reactive()用于創(chuàng)建響應式對象,本文介紹Vue中ref()和reactive()響應式數據的使用方法,感興趣的朋友一起看看吧2025-01-01
Uniapp打包到線上,會出現雙標題問題,原因是：通過地址鏈接訪問時,會有個瀏覽器自身的標題,和uniapp自身的導航欄標題重復,本文給大家介紹了uniapp如何解決H5頁面雙標題,需要的朋友可以參考下2024-10-10
vue3已經內置了這個功能啦,可以在style中使用v-bind指令綁定script模塊中的響應式變量,這篇文章我們來講講vue是如何實現在style中使用script模塊中的響應式變量,感興趣的朋友一起看看吧2024-07-07
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于Vue3中vuex的基本使用方法,需要的朋友可以參考下2022-04-04
解決創(chuàng)建vue項目后沒有vue.config.js文件的問題
這篇文章給大家主要介紹如何解決創(chuàng)建vue項目后沒有webpack.config.js(vue.config.js)文件，文中有詳細的解決方法，感興趣的朋友可以參考閱讀下2023-07-07
Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數據的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
vue最強table vxe-table 虛擬滾動列表 前端導出問題分析
最近遇到個問題,后臺一次性返回2萬條列表數據并且需求要求所有數據必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強table vxe-table 虛擬滾動列表 前端導出問題,感興趣的朋友一起看看吧2023-10-10