Vue2和Vue3如何使用watch偵聽器詳解
watch
:偵聽數(shù)據(jù)變化 (某個(gè)值的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 : 是否在第一次定義時(shí)就執(zhí)行handler函數(shù) * true: 在第一次定義時(shí)就執(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ù)三: {}對象, 對象中可以有個(gè)配置項(xiàng):deep,immediate,flush, deep,immediate的意思上面有過描述, 這里主要對flush的取值做說明: `flush:post/sync/pre pre(默認(rèn)值):渲染前,值改變了,沒有渲染到dom post:渲染后,值改變了,也渲染到dom sync:改變一次渲染一次,每一次都是渲染前`
注意點(diǎn):
實(shí)際開發(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)文章
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue父子組建的簡單通信之控制開關(guān)Switch的實(shí)現(xiàn)
這篇文章主要介紹了Vue父子組建的簡單通信之控制開關(guān)Switch的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12vue3在router中使用store報(bào)錯的完美解決方案
這篇文章主要介紹了vue3在router中使用store報(bào)錯解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧2023-11-11