Vue2和Vue3如何使用watch偵聽(tīng)器詳解
watch
:偵聽(tīng)數(shù)據(jù)變化 (某個(gè)值的change事件)
vue2.x
data(){ return{ num:10 } }, watch:{ num:{ /* * newValue:當(dāng)前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething }, /* * deep:Boolean : 深度監(jiān)聽(tīng) * true: 監(jiān)聽(tīng)堆的改變就 * false:只監(jiān)聽(tīng)棧的改變(默認(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)聽(tīng)響應(yīng)式的數(shù)據(jù)
基本使用
const num = ref(0) 1. 導(dǎo)入 import {watch} from 'vue' 2. 使用 `const 返回值= watch(需要監(jiān)聽(tīng)的值, (newVal,oldVal)=>{ }, {deep,immediate,flush})` 返回值: 可以關(guān)閉監(jiān)聽(tīng): 返回值() 參數(shù)一: 需要監(jiān)聽(tīng)的值 基本數(shù)據(jù)類型(Number,String,Boolean,null,undefined): ()=>基本數(shù)據(jù)類型值 復(fù)雜數(shù)據(jù)類型(Array,Object,Function): 直接寫(xiě)/()=>基本數(shù)據(jù)類型值 參數(shù)二: 類比Vue2中的handler函數(shù) 參數(shù)三: {}對(duì)象, 對(duì)象中可以有個(gè)配置項(xiàng):deep,immediate,flush, deep,immediate的意思上面有過(guò)描述, 這里主要對(duì)flush的取值做說(shuō)明: `flush:post/sync/pre pre(默認(rèn)值):渲染前,值改變了,沒(méi)有渲染到dom post:渲染后,值改變了,也渲染到dom sync:改變一次渲染一次,每一次都是渲染前`
注意點(diǎn):
實(shí)際開(kāi)發(fā)中監(jiān)聽(tīng)不到變化 統(tǒng)一使用
watch(()=>響應(yīng)式數(shù)據(jù),()=>{},{deep:true})
以上就是Vue2和Vue3如何使用watch偵聽(tīng)器詳解的詳細(xì)內(nèi)容,更多關(guān)于watch偵聽(tīng)器使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Vue 基礎(chǔ)語(yǔ)法之計(jì)算屬性(computed)、偵聽(tīng)器(watch)、過(guò)濾器(filters)詳解
- Vue3源碼分析偵聽(tīng)器watch的實(shí)現(xiàn)原理
- 詳解Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器
- 一文搞懂Vue3中watchEffect偵聽(tīng)器的使用
- 詳解Vue3中偵聽(tīng)器watch的使用教程
- 一篇文章教你簡(jiǎn)單使用Vue的watch偵聽(tīng)器
- Vue 2.0 偵聽(tīng)器 watch屬性代碼詳解
- Vue.js中關(guān)于偵聽(tīng)器(watch)的高級(jí)用法示例
- Vue數(shù)據(jù)監(jiān)聽(tīng)器watch和watchEffect的使用
相關(guān)文章
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue父子組建的簡(jiǎn)單通信之控制開(kāi)關(guān)Switch的實(shí)現(xiàn)
這篇文章主要介紹了Vue父子組建的簡(jiǎn)單通信之控制開(kāi)關(guān)Switch的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06vue多頁(yè)面開(kāi)發(fā)和打包正確處理方法
這篇文章主要介紹了vue多頁(yè)面開(kāi)發(fā)和打包的正確處理方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04使用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ū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12vue3在router中使用store報(bào)錯(cuò)的完美解決方案
這篇文章主要介紹了vue3在router中使用store報(bào)錯(cuò)解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧2023-11-11