Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解

更新時(shí)間：2023年07月24日 11:19:11 作者：周莫申

watch是一個(gè)偵聽器，默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)，watchEffect是會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來講講二者的區(qū)別，感興趣的可以了解一下

watchEffect

watchEffect會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴。在初始化的時(shí)候watchEffect會(huì)自動(dòng)執(zhí)行一次（這是無法阻止的），之后watchEffect會(huì)根據(jù)收集到的響應(yīng)式依賴，在變量發(fā)生改變時(shí)就會(huì)被觸發(fā)。

接下來看官方的描述：

wactchEffect：立即運(yùn)行一個(gè)函數(shù)，同時(shí)響應(yīng)式地追蹤其依賴，并在依賴更改時(shí)重新執(zhí)行。

類型

?function watchEffect(
? ?effect: (onCleanup: OnCleanup) => void,
? ?options?: WatchEffectOptions
?): StopHandle
??
?type OnCleanup = (cleanupFn: () => void) => void
??
?interface WatchEffectOptions {
? ?flush?: 'pre' | 'post' | 'sync' // 默認(rèn)：'pre'
? ?onTrack?: (event: DebuggerEvent) => void
? ?onTrigger?: (event: DebuggerEvent) => void
?}
??
?type StopHandle = () => void

基本使用

下面例子中watchEffect中只有name是響應(yīng)式對像，它會(huì)在頁面初始化的時(shí)候就執(zhí)行一次用于收集name的響應(yīng)式依賴，changeName事件被觸發(fā)時(shí)，name被改變了，對應(yīng)的就會(huì)觸發(fā)watchEffect；當(dāng)changeAge觸發(fā)時(shí)，因?yàn)椴]有在watchEffect中使用age，所以watchEffect沒有收集到對應(yīng)的響應(yīng)式依賴，watchEffect就不會(huì)被觸發(fā)。

?<template>
? ?<div id="app">
? ? ?<h2>{{ name }}</h2>
? ? ?<h2>{{ age }}</h2>
? ? ?<button @click="changeName">修改name</button>
? ? ?<button @click="changeAge">修改Age</button>
? ?</div>
?</template>
??
?<script>
?import { watchEffect, defineComponent, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ?//watchEffect：自動(dòng)收集響應(yīng)式依賴，默認(rèn)初始化就會(huì)執(zhí)行一次
? ? ?const name = ref("李四")
? ? ?const age = ref(18)
??
? ? ?watchEffect(() => {
? ? ? ?console.log("name:", name.value);
? ?  })
? ? ?const changeName = () => name.value += "1"
? ? ?const changeAge = () => age.value += 1
??
? ? ?return {
? ? ? ?name,
? ? ? ?age,
? ? ? ?changeName,
? ? ? ?changeAge
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

停止監(jiān)聽

watchEffect會(huì)返回一個(gè)函數(shù)，這個(gè)函數(shù)可以用于停止對響應(yīng)式對象的監(jiān)聽，下面例子中當(dāng)age > 25是就會(huì)停止監(jiān)聽：

?<template>
? ?<div id="app">
? ? ?<h2>{{ name }}</h2>
? ? ?<h2>{{ age }}</h2>
? ? ?<button @click="changeName">修改name</button>
? ? ?<button @click="changeAge">修改Age</button>
? ?</div>
?</template>
??
?<script>
?import { watchEffect, defineComponent, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ?//watchEffect：自動(dòng)收集響應(yīng)式依賴，默認(rèn)初始化就會(huì)執(zhí)行一次
? ? ?const name = ref("李四")
? ? ?const age = ref(18)
??
? ? ?// wacthEffect會(huì)返回一個(gè)函數(shù)，這個(gè)函數(shù)可用于停止所有的wacthEffect的偵聽
? ? ?const stop = watchEffect(() => {
? ? ? ?console.log("userInfo:", name.value,age.value);
? ?  })
??
? ? ?const changeName = () => name.value += "1"
? ? ?const changeAge = () => {
? ? ? ?age.value += 1
? ? ? ?// 當(dāng) age > 25 時(shí)停止偵聽
? ? ? ?if(age.value > 25) stop()
? ?  }
??
? ? ?return {
? ? ? ?name,
? ? ? ?age,
? ? ? ?changeName,
? ? ? ?changeAge
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

清除副作用

在使用監(jiān)聽的時(shí)候我們可能會(huì)向服務(wù)器發(fā)送請求，當(dāng)監(jiān)聽的數(shù)據(jù)頻繁變化時(shí)，這種請求就會(huì)頻繁觸發(fā)，這無疑極大的浪費(fèi)了服務(wù)器性能。watchEffect第一個(gè)參數(shù)就是要運(yùn)行的副作用函數(shù)。這個(gè)副作用函數(shù)的參數(shù)也是一個(gè)函數(shù)，用來注冊清理回調(diào)，下面是官方給的例子：

?watchEffect(async (onCleanup) => {
? ?const { response, cancel } = doAsyncWork(id.value)
? ?// `cancel` 會(huì)在 `id` 更改時(shí)調(diào)用
? ?// 以便取消之前
? ?// 未完成的請求
? ?onCleanup(cancel)
? ?data.value = await response
?})

執(zhí)行時(shí)機(jī)

有時(shí)候我們需要去監(jiān)聽dome的變化，通過ref拿到的dome在watchEffect第一次執(zhí)行時(shí)是null，這是因?yàn)榇藭r(shí)dome還未渲染完成。watchEffec的第二個(gè)參數(shù)是一個(gè)可選項(xiàng)，其中flush可以用來調(diào)整watchEffect執(zhí)行時(shí)機(jī)。

下面是官方對flush的描述：

默認(rèn)情況下，偵聽器將在組件渲染之前執(zhí)行。設(shè)置 flush: 'post' 將會(huì)使偵聽器延遲到組件渲染之后再執(zhí)行。在某些特殊情況下 (例如要使緩存失效)，可能有必要在響應(yīng)式依賴發(fā)生改變時(shí)立即觸發(fā)偵聽器。這可以通過設(shè)置 flush: 'sync' 來實(shí)現(xiàn)。然而，該設(shè)置應(yīng)謹(jǐn)慎使用，因?yàn)槿绻卸鄠€(gè)屬性同時(shí)更新，這將導(dǎo)致一些性能和數(shù)據(jù)一致性的問題。

舉個(gè)栗子：

默認(rèn)’pre‘：偵聽器會(huì)在組件渲染前執(zhí)行，控制臺(tái)會(huì)輸出兩次，第一次為null,第二次是頁面渲染完成成功獲取到組件的時(shí)候，會(huì)輸出組件的引用：

?<template>
? ?<div id="app">
? ? ?<h2 ref="name">張三</h2>
? ?</div>
?</template>
??
?<script>
?import { watchEffect, defineComponent, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ? ?// 執(zhí)行時(shí)機(jī)（flush）：'pre' | 'post' | 'sync' // 默認(rèn)'pre'
? ? ? ?const name = ref(null)
? ? ? ?watchEffect(() => {
? ? ? ? ? ?console.log("nameDome:", name.value);
? ? ?  })
? ? ?return {
? ? ? ?name
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

執(zhí)行結(jié)果截圖如下： 我們可以在控制臺(tái)上看到wathcEffect在渲染完成之前執(zhí)行了一次，此時(shí)的name為null，當(dāng)渲染完成之后name的值發(fā)生了改變，watchEffect再次執(zhí)行，輸出這個(gè)節(jié)點(diǎn)：

修改為flush: 'post'：它將會(huì)使偵聽器延遲到組件渲染之后再執(zhí)行。在某些特殊情況下 (例如要使緩存失效)，可能有必要在響應(yīng)式依賴發(fā)生改變時(shí)立即觸發(fā)偵聽器。所以控制臺(tái)只會(huì)輸出一次，輸出的是組件的引用：

?<template>
? ?<div id="app">
? ? ?<h2 ref="name">張三</h2>
? ?</div>
?</template>
??
?<script>
?import { watchEffect, defineComponent, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ? ?// 執(zhí)行時(shí)機(jī)（flush）：'pre' | 'post' | 'sync' // 默認(rèn)'pre'
? ? ? ?const name = ref(null)
? ? ? ?watchEffect(() => {
? ? ? ? ? ?console.log("nameDome:", name.value);
? ? ?  }, {
? ? ? ? ?flush: 'post'
? ? ?  })
??
? ? ?return {
? ? ? ?name
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

執(zhí)行結(jié)果截圖如下： ，延后執(zhí)行之后就不會(huì)觸發(fā)一次無意義的監(jiān)聽了

watch

watch是一個(gè)偵聽器，默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)。先貼官方文檔

watch需要偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用；
默認(rèn)情況下watch是懶監(jiān)聽，只有在被監(jiān)聽的數(shù)據(jù)源發(fā)生變化的時(shí)候才會(huì)執(zhí)行回調(diào)；

watch與watchEffect的區(qū)別

watch默認(rèn)不會(huì)初始化立即執(zhí)行；
watch有更具體的說明那些狀態(tài)發(fā)生變化是觸發(fā)偵聽器的執(zhí)行；
watch能夠訪問偵聽狀態(tài)變化前后的值；

類型參數(shù)

下面是官網(wǎng)對watch類型的描述：

?// 偵聽單個(gè)來源
?function watch<T>(
? ?source: WatchSource<T>,
? ?callback: WatchCallback<T>,
? ?options?: WatchOptions
?): StopHandle
??
?// 偵聽多個(gè)來源
?function watch<T>(
? ?sources: WatchSource<T>[],
? ?callback: WatchCallback<T[]>,
? ?options?: WatchOptions
?): StopHandle

watch一共有三個(gè)參數(shù)，分別是：source、callback和options，options為可選參數(shù)。

soure

soure是一個(gè)WatchSource<T>類型，該類型規(guī)定了soure可以是ref對象、reactive對象、數(shù)組對象、函數(shù)(getter)和普通對象：

?type WatchSource<T> =
? ?| Ref<T> // ref
? ?| (() => T) // getter
? ?| T extends object
? ?? T
?  : never // 響應(yīng)式對象

callback

watch的第二個(gè)參數(shù)callback是watch執(zhí)行的回調(diào)，這個(gè)函數(shù)有三個(gè)參數(shù)，分別是vaule(新值)、oldValue(舊值)、onCleanup函數(shù)（用于清除副作用），下面是官網(wǎng)對于watch回調(diào)函數(shù)的描述：

?type WatchCallback<T> = (
? ?value: T,
? ?oldValue: T,
? ?onCleanup: (cleanupFn: () => void) => void
?) => void

options

options是可選配置項(xiàng)。我們通過下面接口的描述看到它是繼承至WatchEffectOptions的。immediate可以控制watch在組件初始化是是否執(zhí)行，默認(rèn)值是false。

deep是控制是否開啟深度監(jiān)聽的參數(shù)，watch在監(jiān)聽雜的對象時(shí)只對表層進(jìn)行監(jiān)聽，默認(rèn)值是false，如果對象的屬性還是一個(gè)對像，那么這個(gè)對象只要地址不改變watch是不會(huì)觸發(fā)的，通過deep: true可以監(jiān)聽到深層對象的改變，需要注意的是：1、當(dāng)watch監(jiān)聽的是一個(gè)reactive對象時(shí)會(huì)自動(dòng)開啟深度監(jiān)聽；2、如果回調(diào)函數(shù)是因?yàn)樯疃缺O(jiān)聽的變更而觸發(fā)的，那么value和oldValue將會(huì)是同一個(gè)對象。

flush和watchEffect一樣的flush，用于控制觸發(fā)實(shí)機(jī)，默認(rèn)pre，在組件渲染之前執(zhí)行，下面是官網(wǎng)的描述：

?interface WatchOptions extends WatchEffectOptions {
? ?immediate?: boolean // 默認(rèn)：false
? ?deep?: boolean // 默認(rèn)：false
? ?flush?: 'pre' | 'post' | 'sync' // 默認(rèn)：'pre'
? ?onTrack?: (event: DebuggerEvent) => void
? ?onTrigger?: (event: DebuggerEvent) => void
?}

基本使用

我將通過source傳參的不同來舉例watch的基本使用：

傳入ref響應(yīng)式對象

當(dāng)監(jiān)聽的是ref對象時(shí)，callback的value和oldValue獲得的是ref對象對應(yīng)的value值：

?<template>
? ?<div id="app">
? ? ?<h2>{{ name }}</h2>
? ? ?<button @click="changeName">改變用戶數(shù)據(jù)</button>
? ?</div>
?</template>
??
?<script>
?import { watch, defineComponent, reactive, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ? //  傳入ref對象，newValue和oldValue是對應(yīng)的value值
? ? ? const name = ref('張三')
? ? ? watch(name, (newVlaue,oldValue) => {
? ? ? ? console.log('name:',newVlaue,oldValue);
? ? ? })
? ? ?const changeName = ()=>{
? ? ? ?name.value += "1"
? ?  }
? ? ?return {
? ? ? ?name,
? ? ? ?changeName
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

偵聽多個(gè)來源，callback會(huì)接收兩個(gè)數(shù)組，對應(yīng)的順序是偵聽數(shù)組的順序，為了更直觀我做了解構(gòu)，也可以寫成(newValue,oldValue)的形式：

?<template>
? ?<div id="app">
? ? ?<h2>{{ name }}</h2>
? ? ?<h2>{{ age }}</h2>
? ? ?</h2>
? ? ?<button @click="changeInfo">改變用戶數(shù)據(jù)</button>
? ?</div>
?</template>
??
?<script>
?import { watch, defineComponent, reactive, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ? //  傳入多個(gè)對象，newValue和oldValue是對應(yīng)的value值
? ? ? const name = ref('張三')
? ? ? const age = ref(18)
? ? ? watch([name,age], ([newName,newAge],[oldName,oldAge]) => {
? ? ? ? console.log('new:',newName,newAge,'old',oldName,oldAge);
? ? ? })
? ? ?const changeInfo = ()=>{
? ? ? ?name.value += "1"
? ? ? ?age.value += 1
? ?  }
? ? ?return {
? ? ? ?name,
? ? ? ?age,
? ? ? ?changeInfo
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

傳入reactive對象，callback對應(yīng)的value和oldValue都將是reactive對象，下面userInfo是一個(gè)reactive對象，所以newValue和oldValue都會(huì)是reactive對象：

?<template>
? ?<div id="app">
? ? ?<h2>{{ userInfo.name }}</h2>
? ? ?<h2>{{ userInfo.age }}</h2>
? ? ?<button @click="changeInfo">改變用戶數(shù)據(jù)</button>
? ?</div>
?</template>
??
?<script>
?import { watch, defineComponent, reactive, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ?const userInfo = reactive({ name: '張三', age: 18 })
? ? ?// 傳入reactive對象
? ? ? watch(userInfo, (newValue, oldValue) => {
? ? ? ? ? console.log('userInfo',newValue,oldValue);
? ? ? })
? ? ?const changeInfo = ()=>{
? ? ? ?userInfo.name += "1"
? ? ? ?userInfo.age += 1
? ?  }
? ? ?return {
? ? ? ?userInfo,
? ? ? ?changeInfo
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

如果我們不希望得到響應(yīng)式的newValue和oldValue，那么我們可以使用getter函數(shù)傳參方式對reactive進(jìn)行解構(gòu)：

?<template>
? ?<div id="app">
? ? ?<h2>{{ userInfo.name }}</h2>
? ? ?<h2>{{ userInfo.age }}</h2>
? ? ?<button @click="changeInfo">改變用戶數(shù)據(jù)</button>
? ?</div>
?</template>
??
?<script>
?import { watch, defineComponent, reactive, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ?const userInfo = reactive({ name: '張三', age: 18 })
? ? ?// 如果不希望newValue和oldValue是reactive對象可以在傳入時(shí)對它進(jìn)行解構(gòu)
? ? ?watch(() => { return {...userInfo} }, (newValue, oldValue) => {
? ? ? ?console.log('userInfo:',newValue,oldValue);
? ?  })
? ? ?const changeInfo = ()=>{
? ? ? ?userInfo.name += "1"
? ? ? ?userInfo.age += 1
? ?  }
? ? ?return {
? ? ? ?userInfo,
? ? ? ?changeInfo
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

傳入getter函數(shù)，下面摘自官網(wǎng)的描述："當(dāng)使用 getter 函數(shù)作為源時(shí)，回調(diào)只在此函數(shù)的返回值變化時(shí)才會(huì)觸發(fā)。如果你想讓回調(diào)在深層級(jí)變更時(shí)也能觸發(fā)，你需要使用 { deep: true } 強(qiáng)制偵聽器進(jìn)入深層級(jí)模式。在深層級(jí)模式時(shí)，如果回調(diào)函數(shù)由于深層級(jí)的變更而被觸發(fā)，那么新值和舊值將是同一個(gè)對象。"

?<template>
? ?<div id="app">
? ? ?<h2>{{ userInfo.name }}</h2>
? ? ?<h2>{{ userInfo.age }}</h2>
? ? ?<button @click="changeInfo">改變用戶數(shù)據(jù)</button>
? ?</div>
?</template>
??
?<script>
?import { watch, defineComponent, reactive, ref } from "vue";
??
?export default defineComponent({
? ?setup() {
? ? ?const userInfo = reactive({ name: '張三', age: 18 })
??
? ? ?// 二、傳入getter函數(shù)形式
? ? ?watch(() => userInfo.name, (newVlaue,oldValue) => {
? ? ? ?console.log('newValue',newVlaue,'oldValue',oldValue)
? ?  })
??
? ? ?const changeInfo = ()=>{
? ? ? ?userInfo.name += "1"
? ? ? ?userInfo.age += 1
? ?  }
? ? ?return {
? ? ? ?userInfo,
? ? ? ?changeInfo
? ?  }
?  },
?});
?</script>
??
?<style scoped></style>

以上就是Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 watchEffect和watch的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: