詳解Vue3中Watch監(jiān)聽(tīng)事件的使用
一、watch的使用
watch(WatcherSource, Callback, [WatchOptions]) type WatcherSource<T> = Ref<T> | (() => T) interface WatchOptions extends WatchEffectOptions { -- deep?: boolean ``// 默認(rèn):false` -- immediate?: boolean ``// 默認(rèn):false` }
參數(shù)說(shuō)明:
- WatcherSource: 用于指定要偵聽(tīng)的響應(yīng)式變量。WatcherSource可傳入ref響應(yīng)式數(shù)據(jù),reactive響應(yīng)式對(duì)象要寫(xiě)成函數(shù)的形式。
- Callback: 執(zhí)行的回調(diào)函數(shù),可依次接收當(dāng)前值newValue,先前值oldValue作為入?yún)ⅰ?/li>
- WatchOptions:支持 deep、immediate。當(dāng)需要對(duì)響應(yīng)式對(duì)象進(jìn)行深度監(jiān)聽(tīng)時(shí),設(shè)置deep: true;默認(rèn)情況下watch是惰性的,當(dāng)我們?cè)O(shè)置immediate: true時(shí),watch會(huì)在初始化時(shí)立即執(zhí)行回調(diào)函數(shù)。
- 除此之外,vue3的watch還支持偵聽(tīng)多個(gè)響應(yīng)式數(shù)據(jù),也能手動(dòng)停止watch監(jiān)聽(tīng)。
1、引入watch
import { watch } from 'vue'
然后在setup里注入監(jiān)聽(tīng)事件
setup(props){ const state = reactive({ count: 0 , message:'Hellow world' }); watch(state,()=>{ console.log(state.count); --單個(gè)監(jiān)聽(tīng) }) return { state, } },
2、多個(gè)數(shù)據(jù)源監(jiān)聽(tīng)
<template> <div> age: {{obj1.age}} name: {{obj.name}} list: <ul> <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li> </ul> <hr> <button @click="changeName">改變name</button> <button @click="changeList">改變list</button> <button @click="changeAge">改變age</button> </div> </template> <script lang="ts"> import {defineComponent, reactive, watch} from 'vue'; export default defineComponent({ setup () { let obj = reactive({ name: '1111', list: ['222', '222222', '222222'] }) let obj1 = reactive({ age: 18 }) function changeName () { obj.name += '+' } function changeList () { obj.list[0] += '+' } function changeAge () { obj1.age++ } watch([obj, obj1], () => { console.log(obj.name) if(obj.age>28){ watchFunc() // 停止監(jiān)聽(tīng)` } }, { // 頁(yè)面加載會(huì)先執(zhí)行一次 immediate: true }) return { obj, changeName, changeList, changeAge, obj1 } } }) </script> <style scoped> </style>
結(jié)果:當(dāng)改變名字和年齡時(shí),watch都監(jiān)聽(tīng)到了數(shù)據(jù)的變化。當(dāng)age大于28時(shí),我們停止了監(jiān)聽(tīng),此時(shí)再改變年齡,由于watch的停止,導(dǎo)致watch的回調(diào)函數(shù)失效。
解決辦法:我們可以通過(guò)watch偵聽(tīng)多個(gè)值的變化,也可以利用給watch函數(shù)取名字,然后通過(guò)執(zhí)行名字()函數(shù)來(lái)停止偵聽(tīng)。
3、監(jiān)聽(tīng)數(shù)組變化
<template> <div class="watch-test"> <div>ref定義數(shù)組:{{arrayRef}}</div> <div>reactive定義數(shù)組:{{arrayReactive}}</div> </div> <div> <button @click="changeArrayRef">改變r(jià)ef定義數(shù)組第一項(xiàng)</button> <button @click="changeArrayReactive">改變r(jià)eactive定義數(shù)組第一項(xiàng)</button> </div> </template> <script> import {ref, reactive, watch} from 'vue' export default { name: 'WatchTest', setup() { const arrayRef = ref([1, 2, 3, 4]) const arrayReactive = reactive([1, 2, 3, 4]) //ref not deep const arrayRefWatch = watch(arrayRef, (newValue, oldValue) => { console.log('newArrayRefWatch', newValue, 'oldArrayRefWatch', oldValue) }) //ref deep const arrayRefDeepWatch = watch(arrayRef, (newValue, oldValue) => { console.log('newArrayRefDeepWatch', newValue, 'oldArrayRefDeepWatch', oldValue) }, {deep: true}) //reactive,源不是函數(shù) const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => { console.log('newArrayReactiveWatch', newValue, 'oldArrayReactiveWatch', oldValue) }) // 數(shù)組監(jiān)聽(tīng)的最佳實(shí)踐- reactive且源采用函數(shù)式返回,返回拷貝后的數(shù)據(jù) const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => { console.log('newArrayReactiveFuncWatch', newValue, 'oldArrayReactiveFuncWatch', oldValue) }) const changeArrayRef = () => { arrayRef.value[0] = 6 } const changeArrayReactive = () => { arrayReactive[0] = 6 } return { arrayRef, arrayReactive, changeArrayRef, changeArrayReactive } } } </script>
結(jié)果:當(dāng)將數(shù)組定義為響應(yīng)式數(shù)據(jù)ref時(shí),如果不加上deep:true,watch是監(jiān)聽(tīng)不到值的變化的;而加上deep:true,watch可以檢測(cè)到數(shù)據(jù)的變化,但老值和新值一樣,即不能獲取老值。當(dāng)數(shù)組定義為響應(yīng)式對(duì)象時(shí),不作任何處理,watch可以檢測(cè)到數(shù)據(jù)的變化,但老值和新值一樣;如果把watch的數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)擴(kuò)展運(yùn)算符克隆一份數(shù)組返回,就可以在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。
結(jié)論:定義數(shù)組時(shí),最好把數(shù)據(jù)定義成響應(yīng)式對(duì)象reactive,這樣watch監(jiān)聽(tīng)時(shí),只需要把數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)擴(kuò)展運(yùn)算符克隆一份數(shù)組返回,即可在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。
4、偵聽(tīng)對(duì)象
<template> <div class="watch-test"> <div>user:{</div> <div>name:{{objReactive.user.name}}</div> <div>age:{{objReactive.user.age}}</div> <div>}</div> <div>brand:{{objReactive.brand}}</div> <div> <button @click="changeAge">改變年齡</button> </div> </div> </template> <script> import {ref, reactive, watch} from 'vue' import _ from 'lodash'; export default { name: 'WatchTest', setup() { const objReactive = reactive({user: {name: '小松菜奈', age: '20'}, brand: 'Channel'}) //reactive 源是函數(shù) const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => { console.log('objReactiveWatch') console.log('new:',JSON.stringify(newValue)) console.log('old:',JSON.stringify(oldValue)) }) //reactive,源是函數(shù),deep:true const objReactiveDeepWatch = watch(() => objReactive, (newValue, oldValue) => { console.log('objReactiveDeepWatch') console.log('new:',JSON.stringify(newValue)) console.log('old:',JSON.stringify(oldValue)) }, {deep: true}) // 對(duì)象深度監(jiān)聽(tīng)的最佳實(shí)踐- reactive且源采用函數(shù)式返回,返回深拷貝后的數(shù)據(jù) const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => { console.log('objReactiveCloneDeepWatch') console.log('new:',JSON.stringify(newValue)) console.log('old:',JSON.stringify(oldValue)) }) const changeAge = () => { objReactive.user.age = 26 } return { objReactive, changeAge } } } </script>
結(jié)果:當(dāng)把對(duì)象定義為響應(yīng)式對(duì)象reactive時(shí),采用函數(shù)形式的返回,如果不加上deep:true,watch是監(jiān)聽(tīng)不到值的變化的;而加上deep:true,watch可以檢測(cè)到數(shù)據(jù)的變化,但老值和新值一樣,即不能獲取老值;若把watch的數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)深拷貝克?。ㄟ@里用了lodash庫(kù)的深拷貝)一份對(duì)象返回,就可以在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。
結(jié)論:定義對(duì)象時(shí),最好把數(shù)據(jù)定義成響應(yīng)式對(duì)象reactive,這樣watch監(jiān)聽(tīng)時(shí),只需要把數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)深拷貝克隆一份對(duì)象返回,即可在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。
5、結(jié)論
- 1.通常我們把原始類型的數(shù)據(jù)(number、string等)定義為ref響應(yīng)數(shù)據(jù),引用類型的數(shù)據(jù)(數(shù)組、對(duì)象)定義為reactive響應(yīng)式數(shù)據(jù);
- 2.當(dāng)我們使用watch監(jiān)聽(tīng)數(shù)據(jù)變化需要同時(shí)獲取新值和老值時(shí),我們需要把數(shù)據(jù)源定義為函數(shù)的形式,并且把數(shù)據(jù)源進(jìn)行深拷貝返回。當(dāng)我們只需要新值時(shí),可以增加deep:true選項(xiàng)即可。
- 其實(shí),引用類型的數(shù)據(jù)定義為ref形式也沒(méi)關(guān)系,也只需要把數(shù)據(jù)源定義為函數(shù)的形式,并且把數(shù)據(jù)源進(jìn)行深拷貝返回,便可獲得新老值~哈哈哈哈哈哈哈哈哈哈哈哈哈哈,但我覺(jué)得最佳實(shí)踐還是要把引用類型定義為reactive響應(yīng)式數(shù)據(jù)。
到此這篇關(guān)于詳解Vue3中Watch監(jiān)聽(tīng)事件的使用的文章就介紹到這了,更多相關(guān)Vue3 Watch監(jiān)聽(tīng)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 一文詳解Vue3的watch是如何實(shí)現(xiàn)監(jiān)聽(tīng)的
- Vue3中watch監(jiān)聽(tīng)的五種情況詳解
- vue3中watch監(jiān)聽(tīng)的四種寫(xiě)法
- Vue3.0監(jiān)聽(tīng)器watch與watchEffect詳解
- Vue3中watch無(wú)法監(jiān)聽(tīng)的解決辦法
- Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽(tīng)無(wú)效
- vue3界面使用router及使用watch監(jiān)聽(tīng)router的改變
- Vue3中watch監(jiān)聽(tīng)使用詳解
- 詳解vue3中watch監(jiān)聽(tīng)的幾種情況
相關(guān)文章
vue常見(jiàn)路由跳轉(zhuǎn)的幾種方式小結(jié)
本文主要介紹了常見(jiàn)路由跳轉(zhuǎn)的幾種方式,主要介紹了四種常見(jiàn)方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09富文本編輯器quill.js?開(kāi)發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開(kāi)發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue-electron項(xiàng)目創(chuàng)建記錄及問(wèn)題小結(jié)解決方案
這篇文章主要介紹了vue-electron項(xiàng)目創(chuàng)建記錄及注意事項(xiàng),本文給大家分享了運(yùn)行項(xiàng)目報(bào)錯(cuò)的問(wèn)題小結(jié)及多種解決方案,需要的朋友可以參考下2024-03-03vue router學(xué)習(xí)之動(dòng)態(tài)路由和嵌套路由詳解
本篇文章主要介紹了vue router 動(dòng)態(tài)路由和嵌套路由,詳細(xì)的介紹了動(dòng)態(tài)路由和嵌套路由的使用方法,有興趣的可以了解一下2017-09-09vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色詳解
這篇文章主要給大家介紹了關(guān)于vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11