您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3中的watch如何使用”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強(qiáng),希望這篇“Vue3中的watch如何使用”文章能幫助大家解決問題。
<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(`我偵聽到了count狀態(tài)的變化,當(dāng)前值為${newValue},從而處理相關(guān)邏輯`); } }) </script> <style> </style>
<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>
<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>
<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>
用于開啟深度監(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+='我不好' } // obj是一個RefImpl對象,當(dāng)不開啟深度監(jiān)聽的時候,監(jiān)聽obj無法檢測到obj屬性的變化 watch(obj,()=>{ console.log(obj.value.name); }, { deep: true }) </script> <style> </style>
是否開啟初始化檢測,默認(rèn)是值發(fā)生變化時,才會執(zhí)行監(jiān)聽器里面的方法,開啟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是一個RefImpl對象,當(dāng)不開啟深度監(jiān)聽的時候,監(jiān)聽obj無法檢測到obj屬性的變化 watch(obj,()=>{ console.log(obj.value.name); }, { deep: true,immediate:true }) </script> <style> </style>
偵聽器的回調(diào)使用與源完全相同的響應(yīng)式狀態(tài)是很常見的。例如:
<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ù)來簡化上面的代碼。watchEffect()
允許我們自動跟蹤回調(diào)的響應(yī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)會立即執(zhí)行,不需要指定immediate
watch 和 watchEffect 都能響應(yīng)式地執(zhí)行有副作用的回調(diào)。它們之間的主要區(qū)別是追蹤響應(yīng)式依賴的方式:
watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調(diào)中訪問到的東西。另外,僅在數(shù)據(jù)源確實改變時才會觸發(fā)回調(diào)。watch 會避免在發(fā)生副作用時追蹤依賴,因此,我們能更加精確地控制回調(diào)函數(shù)的觸發(fā)時機(jī)。
watchEffect,則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中,自動追蹤所有能訪問到的響應(yīng)式屬性。這更方便,而且代碼往往更簡潔,但有時其響應(yīng)性依賴關(guān)系會不那么明確。
如果想在偵聽器回調(diào)中能訪問被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 選項:
watch(source, callback, { flush: 'post' }) watchEffect(callback, { flush: 'post' })
停止監(jiān)聽
在 setup() 或 <script setup> 中用同步語句創(chuàng)建的偵聽器,會自動綁定到宿主組件實例上,并且會在宿主組件卸載時自動停止。因此,在大多數(shù)情況下,你無需關(guān)心怎么停止一個偵聽器。
一個關(guān)鍵點是,偵聽器必須用同步語句創(chuàng)建:如果用異步回調(diào)創(chuàng)建一個偵聽器,那么它不會綁定到當(dāng)前組件上,你必須手動停止它,以防內(nèi)存泄漏。如下方這個例子:
// ...當(dāng)該偵聽器不再需要時 unwatch()
關(guān)于“Vue3中的watch如何使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。