監聽數組或對象,修改其屬性數據,但watch并沒有監聽到變化,尋找原因和解決方式。
對于單個ref對象的監聽,我們只需要直接監聽即可,沒有套路。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef = ref('大澈')// 點擊事件-修改數據的值const handleChange = () => { nameRef.value = '程序員大澈'}// 監聽數據變化watch(nameRef, (newValue, oldValue) => { console.log(`新的值是:${newValue},舊的值是:${oldValue}`);})</script>
對于單個ref對象的基本類型值的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef = ref('大澈')// 點擊事件-修改數據的值const handleChange = () => { nameRef.value = '程序員大澈'}// 監聽數據變化watch(() => nameRef.value, (newValue, oldValue) => { console.log(`新的值是:${newValue},舊的值是:${oldValue}`);})</script>
內部自動將值轉為reactive對象,監聽reactive對象的詳細見下文。
對于多個ref對象或其值的監聽,我們需要使用數組將watch監聽器的目標包裹。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef111 = ref('大澈111')let nameRef222 = ref('大澈222')// 點擊事件-修改數據的值const handleChange = () => { nameRef111.value = '程序員大澈111' nameRef222.value = '程序員大澈222'}// 監聽數據變化watch([nameRef111, () => nameRef222.value], (newValue, oldValue) => { console.log(`新的值是:${newValue[0]},舊的值是:${oldValue[0]}`);})</script>
對于單個reactive對象的對象類型值的監聽,我們只需要直接監聽即可,沒有套路。
但此時我們會發現,watch的新值和舊值是相同的,為什么會這樣呢?又怎么解決呢?
因為對于引用類型數據,賦值存的是地址,地址指向的是堆,所以無論值怎么改變,新舊對象都指向同一個地址。
至于解決的辦法很簡單, 我們不去直接監聽一個引用類型,而是去監聽引用類型中一個具體的值即可。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let dataReactive = reactive({ name: '大澈',})// 點擊事件-修改數據的值const handleChange = () => { dataReactive.name = '程序員大澈'}// 監聽數據變化watch(dataReactive, (newValue, oldValue) => { console.log(`新的值是:${newValue.name},舊的值是:${oldValue.name}`);})</script>
對于單個reactive對象的對象類型值的基本類型屬性的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。
值得注意的是,watch的新值和舊值是不同的了。
對于單個reactive對象的對象類型值的對象類型屬性的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。
如果是監聽整個對象類型屬性,只有進行整個對象替換時,才不需要開啟deep深度監聽。其它時候,如修改、刪除、新增,都需要開啟deep深度監聽,才能監聽數據的變化。
如果是監聽對象類型屬性中的某個屬性值,則不需要開啟deep深度監聽。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let dataReactive = reactive({ obj: { age: 18, },})// 點擊事件-修改數據的值const handleChange = () => { dataReactive.obj.age = 99}// 監聽數據變化watch(() => dataReactive.obj, (newValue, oldValue) => { console.log(`新的值是:${newValue.age},舊的值是:${oldValue.age}`);}, { deep: true,})</script>
同監聽單個reactive對象-對象類型值-對象類型屬性。
所有情況都同監聽單個reactive對象-對象類型值。
同監聽多個ref對象或其值。
內容如上。
有的時候,我們可能只需要監聽一次。在監聽之后,我們就需要取消對watch的監聽。此時我們可以這樣做,將watch監聽器賦值給一個變量,在取消監聽的時候調用此變量即可。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef = ref('大澈')// 點擊事件-修改數據的值const handleChange = () => { nameRef.value = '程序員大澈'}// 點擊事件-停止對應的watch監聽數據const handleStopChange = () => { stopWatch()}// 監聽數據變化const stopWatch = watch(() => nameRef.value, (newValue, oldValue) => { console.log(`新的值是:${newValue},舊的值是:${oldValue}`);})</script>
本文鏈接:http://www.www897cc.com/showinfo-26-26545-0.htmlVue3問題:如何解決Watch監聽對象數組失效,及如何停止監聽?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com