Vue3中watch的最佳用法
watch函數(shù)用于偵聽(tīng)某個(gè)值的變化，當(dāng)該值發(fā)生改變后，觸發(fā)對(duì)應(yīng)的處理邏輯。
一、watch的基本實(shí)例
<template>
<div>
<div>{{ count }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import {ref,reactive, watch} from 'vue'
const count = ref(0)
function changCount(){
count.value++
}
watch(count,(newValue,oldValue)=>{
if(newValue){
console.log(`我偵聽(tīng)到了count狀態(tài)的變化，當(dāng)前值為${newValue},從而處理相關(guān)邏輯`);
}
})
</script>
<style>
</style>二、watch監(jiān)聽(tīng)多個(gè)數(shù)據(jù)
getter 函數(shù)：
<template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
() => x.value + y.value,
(sum) => {
console.log(`我是x與y之和${sum}`);
}
);
</script>
<style>
</style>多個(gè)來(lái)源組成的數(shù)組
<template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
[x,y],
([x,y]) => {
console.log(`我是x=>${x},我是y=》${y}`);
}
);
</script>
<style>
</style>三、watch監(jiān)聽(tīng)對(duì)象的值
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(()=>obj.value.name,(name)=>{
console.log(name);
})
</script>
<style>
</style>四、watch監(jiān)聽(tīng)器的配置參數(shù)
1.deep
用于開啟深度監(jiān)聽(tīng)
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一個(gè)RefImpl對(duì)象，當(dāng)不開啟深度監(jiān)聽(tīng)的時(shí)候，監(jiān)聽(tīng)obj無(wú)法檢測(cè)到obj屬性的變化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true })
</script>
<style>
</style>2.immediate
是否開啟初始化檢測(cè)，默認(rèn)是值發(fā)生變化時(shí)，才會(huì)執(zhí)行監(jiān)聽(tīng)器里面的方法，開啟immediate后初始化就執(zhí)行一次。
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一個(gè)RefImpl對(duì)象，當(dāng)不開啟深度監(jiān)聽(tīng)的時(shí)候，監(jiān)聽(tīng)obj無(wú)法檢測(cè)到obj屬性的變化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
<style>
</style>五、通過(guò)watchEffect()簡(jiǎn)化watch
偵聽(tīng)器的回調(diào)使用與源完全相同的響應(yīng)式狀態(tài)是很常見(jiàn)的。例如：
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(obj.value,()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>我們可以使用watchEffect 函數(shù)來(lái)簡(jiǎn)化上面的代碼。watchEffect() 允許我們自動(dòng)跟蹤回調(diào)的響應(yīng)式依賴。上面的偵聽(tīng)器可以重寫為：
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// watch(obj.value,()=>{
// console.log(obj.value.name);
// })
watchEffect(()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>注：需要注意的是watchEffect 回調(diào)會(huì)立即執(zhí)行，不需要指定immediate
六、watch vs. watchEffect
watch 和 watchEffect 都能響應(yīng)式地執(zhí)行有副作用的回調(diào)。它們之間的主要區(qū)別是追蹤響應(yīng)式依賴的方式：
- watch 只追蹤明確偵聽(tīng)的數(shù)據(jù)源。它不會(huì)追蹤任何在回調(diào)中訪問(wèn)到的東西。另外，僅在數(shù)據(jù)源確實(shí)改變時(shí)才會(huì)觸發(fā)回調(diào)。watch 會(huì)避免在發(fā)生副作用時(shí)追蹤依賴，因此，我們能更加精確地控制回調(diào)函數(shù)的觸發(fā)時(shí)機(jī)。
- watchEffect，則會(huì)在副作用發(fā)生期間追蹤依賴。它會(huì)在同步執(zhí)行過(guò)程中，自動(dòng)追蹤所有能訪問(wèn)到的響應(yīng)式屬性。這更方便，而且代碼往往更簡(jiǎn)潔，但有時(shí)其響應(yīng)性依賴關(guān)系會(huì)不那么明確。
七、回調(diào)觸發(fā)機(jī)制與停止監(jiān)聽(tīng)器
如果想在偵聽(tīng)器回調(diào)中能訪問(wèn)被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 選項(xiàng)：
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})停止監(jiān)聽(tīng)
在 setup() 或 <script setup> 中用同步語(yǔ)句創(chuàng)建的偵聽(tīng)器，會(huì)自動(dòng)綁定到宿主組件實(shí)例上，并且會(huì)在宿主組件卸載時(shí)自動(dòng)停止。因此，在大多數(shù)情況下，你無(wú)需關(guān)心怎么停止一個(gè)偵聽(tīng)器。
一個(gè)關(guān)鍵點(diǎn)是，偵聽(tīng)器必須用同步語(yǔ)句創(chuàng)建：如果用異步回調(diào)創(chuàng)建一個(gè)偵聽(tīng)器，那么它不會(huì)綁定到當(dāng)前組件上，你必須手動(dòng)停止它，以防內(nèi)存泄漏。如下方這個(gè)例子：
// ...當(dāng)該偵聽(tīng)器不再需要時(shí) unwatch()
到此這篇關(guān)于Vue3中watch的最佳用法的文章就介紹到這了,更多相關(guān)Vue3中watch的用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
解決vue接口數(shù)據(jù)賦值給data沒(méi)有反應(yīng)的問(wèn)題
今天小編就為大家分享一篇解決vue接口數(shù)據(jù)賦值給data沒(méi)有反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3+Vite+TS使用elementPlus時(shí)踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時(shí)踩的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue實(shí)現(xiàn)公告消息橫向無(wú)縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)公告消息橫向無(wú)縫循環(huán)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Ant?Design?是一個(gè)開源庫(kù)，可讓您創(chuàng)建吸引人的響應(yīng)式網(wǎng)站。如果您想使用經(jīng)過(guò)充分測(cè)試且易于學(xué)習(xí)的框架，那么它是您下一個(gè)項(xiàng)目的絕佳選擇，這篇文章主要介紹了如何在?Vue?3?中使用?Ant?Design,需要的朋友可以參考下2023-04-04
vue 動(dòng)態(tài)樣式綁定 class/style的寫法小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)樣式綁定 class/style的寫法小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
uniapp中使用lottie實(shí)現(xiàn)JSON動(dòng)畫的操作步驟
這篇文章主要介紹了如何在項(xiàng)目中使用JSON動(dòng)畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF方法流程詳解
在日常的工作中，有時(shí)候會(huì)碰到需要將某個(gè)網(wǎng)址網(wǎng)頁(yè)保存成為pdf的情況，這篇文章主要介紹了用Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08