Vue3中watch的用法與最佳實(shí)踐指南
前言🌟
本文以實(shí)驗(yàn)的形式，為大家揭示Vue3中watch的最佳實(shí)踐。
這篇文章的主要目的是研究watch在監(jiān)聽響應(yīng)式數(shù)據(jù)時(shí)，如何獲取當(dāng)前值和先前值。順便給大家補(bǔ)習(xí)一下watch的用法，然后引出為了配合watch能獲取當(dāng)前值和先前值，如何選用ref和reactive定義響應(yīng)式數(shù)據(jù)。
一、API介紹
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ù)說明：
WatcherSource: 用于指定要偵聽的響應(yīng)式變量。WatcherSource可傳入ref響應(yīng)式數(shù)據(jù)，reactive響應(yīng)式對象要寫成函數(shù)的形式。
Callback: 執(zhí)行的回調(diào)函數(shù)，可依次接收當(dāng)前值newValue，先前值oldValue作為入?yún)ⅰ?/p>
WatchOptions：支持 deep、immediate。當(dāng)需要對響應(yīng)式對象進(jìn)行深度監(jiān)聽時(shí)，設(shè)置deep: true;默認(rèn)情況下watch是惰性的，當(dāng)我們設(shè)置immediate: true時(shí)，watch會(huì)在初始化時(shí)立即執(zhí)行回調(diào)函數(shù)。
除此之外，vue3的watch還支持偵聽多個(gè)響應(yīng)式數(shù)據(jù)，也能手動(dòng)停止watch監(jiān)聽。
二、監(jiān)聽多個(gè)數(shù)據(jù)源
<template>
<div class="watch-test">
<div>name：{{name}}</div>
<div>age：{{age}}</div>
</div>
<div>
<button @click="changeName">改變名字</button>
<button @click="changeAge">改變年齡</button>
</div>
</template>
<script>
import {ref, watch} from 'vue'
export default {
name: 'Home',
setup() {
const name = ref('小松菜奈')
const age = ref(25)
const watchFunc = watch([name, age], ([name, age], [prevName, prevAge]) => {
console.log('newName', name, 'oldName', prevName)
console.log('newAge', age, 'oldAge', prevAge)
if (age > 26) {
watchFunc() // 停止監(jiān)聽
}
},{immediate:true})
const changeName = () => {
name.value = '有村架純'
}
const changeAge = () => {
age.value += 2
}
return {
name,
age,
changeName,
changeAge
}
}
}
</script>
現(xiàn)象：當(dāng)改變名字和年齡時(shí)，watch都監(jiān)聽到了數(shù)據(jù)的變化。當(dāng)age大于26時(shí)，我們停止了監(jiān)聽，此時(shí)再改變年齡，由于watch的停止，導(dǎo)致watch的回調(diào)函數(shù)失效。
結(jié)論：我們可以通過watch偵聽多個(gè)值的變化，也可以利用給watch函數(shù)取名字，然后通過執(zhí)行名字()函數(shù)來停止偵聽。
三、偵聽數(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)聽的最佳實(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>
現(xiàn)象：當(dāng)將數(shù)組定義為響應(yīng)式數(shù)據(jù)ref時(shí)，如果不加上deep:true，watch是監(jiān)聽不到值的變化的；而加上deep:true，watch可以檢測到數(shù)據(jù)的變化，但老值和新值一樣，即不能獲取老值。當(dāng)數(shù)組定義為響應(yīng)式對象時(shí)，不作任何處理，watch可以檢測到數(shù)據(jù)的變化，但老值和新值一樣；如果把watch的數(shù)據(jù)源寫成函數(shù)的形式并通過擴(kuò)展運(yùn)算符克隆一份數(shù)組返回，就可以在監(jiān)聽的同時(shí)獲得新值和老值。
結(jié)論：定義數(shù)組時(shí)，最好把數(shù)據(jù)定義成響應(yīng)式對象reactive，這樣watch監(jiān)聽時(shí)，只需要把數(shù)據(jù)源寫成函數(shù)的形式并通過擴(kuò)展運(yùn)算符克隆一份數(shù)組返回，即可在監(jiān)聽的同時(shí)獲得新值和老值。
四、偵聽對象
<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})
// 對象深度監(jiān)聽的最佳實(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>
現(xiàn)象：當(dāng)把對象定義為響應(yīng)式對象reactive時(shí)，采用函數(shù)形式的返回，如果不加上deep:true，watch是監(jiān)聽不到值的變化的；而加上deep:true，watch可以檢測到數(shù)據(jù)的變化，但老值和新值一樣，即不能獲取老值；若把watch的數(shù)據(jù)源寫成函數(shù)的形式并通過深拷貝克?。ㄟ@里用了lodash庫的深拷貝）一份對象返回，就可以在監(jiān)聽的同時(shí)獲得新值和老值。
結(jié)論：定義對象時(shí)，最好把數(shù)據(jù)定義成響應(yīng)式對象reactive，這樣watch監(jiān)聽時(shí)，只需要把數(shù)據(jù)源寫成函數(shù)的形式并通過深拷貝克隆一份對象返回，即可在監(jiān)聽的同時(shí)獲得新值和老值。
五、總結(jié)✨
1.通常我們把原始類型的數(shù)據(jù)（number、string等）定義為ref響應(yīng)數(shù)據(jù)，引用類型的數(shù)據(jù)（數(shù)組、對象）定義為reactive響應(yīng)式數(shù)據(jù)；
2.當(dāng)我們使用watch監(jiān)聽數(shù)據(jù)變化需要同時(shí)獲取新值和老值時(shí)，我們需要把數(shù)據(jù)源定義為函數(shù)的形式，并且把數(shù)據(jù)源進(jìn)行深拷貝返回。當(dāng)我們只需要新值時(shí)，可以增加deep:true選項(xiàng)即可。
其實(shí)，引用類型的數(shù)據(jù)定義為ref形式也沒關(guān)系，也只需要把數(shù)據(jù)源定義為函數(shù)的形式，并且把數(shù)據(jù)源進(jìn)行深拷貝返回，便可獲得新老值~哈哈哈哈哈哈哈哈哈哈哈哈哈哈，但我覺得最佳實(shí)踐還是要把引用類型定義為reactive響應(yīng)式數(shù)據(jù)。
到此這篇關(guān)于Vue3中watch的用法與最佳實(shí)踐指南的文章就介紹到這了,更多相關(guān)Vue3中watch用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue自定義marquee無縫滾動(dòng)組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章詳細(xì)介紹了Vue的生命周期，文中通過代碼示例介紹的非常詳細(xì)。對大家的學(xué)習(xí)有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會(huì)去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue3動(dòng)態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題
這篇文章主要為大家詳細(xì)介紹了vue3如何通過動(dòng)態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-01-01
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
better-scroll是一個(gè)非常非常強(qiáng)大的第三方庫 在移動(dòng)端利用這個(gè)庫 不僅可以實(shí)現(xiàn)一個(gè)非常類似原生ScrollView的效果 也可以實(shí)現(xiàn)一個(gè)輪播圖的效果。這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Vue如何獲取下拉框中選中的value值和label值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門,module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中的input框點(diǎn)擊后不聚焦問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04