Vue2和Vue3如何使用watch偵聽器詳解
watch:偵聽數(shù)據(jù)變化 (某個值的change事件)
vue2.x
data(){
return{
num:10
}
},
watch:{
num:{
/*
* newValue:當(dāng)前值
* oldValue:修改上一刻的值
*/
handler(newValue,oldValue){
// doSomething
},
/*
* deep:Boolean : 深度監(jiān)聽
* true: 監(jiān)聽堆的改變就
* false:只監(jiān)聽棧的改變(默認(rèn))
*/
deep:true/false,
/*
* immediate:Boolean : 是否在第一次定義時就執(zhí)行handler函數(shù)
* true: 在第一次定義時就執(zhí)行handler函數(shù)
* false:修改后再執(zhí)行handler函數(shù)
*/
immediate:true/false
}
}
vue3.x
watch用于監(jiān)聽響應(yīng)式的數(shù)據(jù)
基本使用
const num = ref(0)
1. 導(dǎo)入 import {watch} from 'vue'
2. 使用
`const 返回值= watch(需要監(jiān)聽的值, (newVal,oldVal)=>{ }, {deep,immediate,flush})`
返回值: 可以關(guān)閉監(jiān)聽: 返回值()
參數(shù)一: 需要監(jiān)聽的值
基本數(shù)據(jù)類型(Number,String,Boolean,null,undefined): ()=>基本數(shù)據(jù)類型值
復(fù)雜數(shù)據(jù)類型(Array,Object,Function): 直接寫/()=>基本數(shù)據(jù)類型值
參數(shù)二: 類比Vue2中的handler函數(shù)
參數(shù)三: {}對象, 對象中可以有個配置項:deep,immediate,flush,
deep,immediate的意思上面有過描述, 這里主要對flush的取值做說明:
`flush:post/sync/pre
pre(默認(rèn)值):渲染前,值改變了,沒有渲染到dom
post:渲染后,值改變了,也渲染到dom
sync:改變一次渲染一次,每一次都是渲染前`
注意點:
實際開發(fā)中監(jiān)聽不到變化 統(tǒng)一使用
watch(()=>響應(yīng)式數(shù)據(jù),()=>{},{deep:true})
以上就是Vue2和Vue3如何使用watch偵聽器詳解的詳細內(nèi)容,更多關(guān)于watch偵聽器使用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
Vue父子組建的簡單通信之控制開關(guān)Switch的實現(xiàn)
這篇文章主要介紹了Vue父子組建的簡單通信之控制開關(guān)Switch的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06

