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偵聽器詳解的詳細(xì)內(nèi)容,更多關(guān)于watch偵聽器使用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于vue打包時的publicPath就是打包后靜態(tài)資源的路徑問題
這篇文章主要介紹了vue打包時的publicPath,就是打包后靜態(tài)資源的路徑,本文通過三種情況分析給大家詳細(xì)介紹,需要的朋友可以參考下2022-07-07
vue上傳文件formData入?yún)榭?接口請求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請求500的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06
使用Vue-neo4j實現(xiàn)繪制三國人物圖譜關(guān)系
這篇文章主要介紹了使用Vue-neo4j實現(xiàn)繪制三國人物圖譜關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue+quasar使用遞歸實現(xiàn)動態(tài)多級菜單
這篇文章主要為大家詳細(xì)介紹了vue+quasar使用遞歸實現(xiàn)動態(tài)多級菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
vue 自定義提示框(Toast)組件的實現(xiàn)代碼
這篇文章主要介紹了vue 自定義提示框(Toast)組件的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方
這篇文章主要為大家詳細(xì)介紹了如何基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10

