Vue3 watch 使用與注意事項

watch 的第一個參數可以是不同形式的“數據源”：它可以是一個 ref (包括計算屬性)、一個響應式對象、一個 getter 函數、或多個數據源組成的數組：

1：reactive監聽對象

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2
})watch(
//source() => {console.log('x')return sum.a + sum.b},
//cb(value) => {console.log('執行回調sum:', value)})setTimeout(() => {sum.a++sum.b--console.log('執行定時器了')
}, 1000)</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

分析：組件一開始掛載先執行一次監聽中的source，一秒后，因為對sum.a或sum.b操作，所以又執行了一次source，但是source的返回值都沒有發生變化，所以都沒有執行回調函數(cb)，這樣監聽只有當sum.a + sum.b返回的值發生變化，才會執行回調函數(cb)

2：reactive監聽對象(使用 immediate: true，立即執行一次回調函數（cb）)

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2
})watch(//source() => {console.log('x')return sum.a + sum.b},//cb(value) => {console.log('執行回調sum:', value)},//  立即執行一次回調函數（cb）{immediate: true}
)setTimeout(() => {sum.a++sum.b--console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

3：reactive監聽對象(使用 immediate: true，立即執行一次回調函數（cb）)

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2
})watch(//source() => {console.log('x')return sum.a + sum.b},//cb(value) => {console.log('執行回調sum:', value)},// 深度監聽{deep: true}
)setTimeout(() => {sum.a++sum.b--console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

分析：為什么加了深度監聽后會執行回調？如果你添加了 { deep: true } 選項，即使計算值相同，回調也會執行，這是因為：

1：深度監聽的機制：deep: true 會讓 Vue 不僅比較計算結果的最終值，還會追蹤依賴項的變化

2：依賴項變化：雖然 sum.a + sum.b 的結果沒變，但 sum.a 和 sum.b 本身都發生了變化

3：觸發條件：深度監聽下，只要依賴的響應式數據 (這里是 sum.a 和 sum.b) 發生了變化，就會觸發回調，不管計算結果是否相同

如果你希望在依賴項變化時總是執行回調，即使計算結果相同，可以使用 watchEffect：

watchEffect(() => {const value = sum.a + sum.bconsole.log('執行回調sum:', value)
})

或者如果你想保持使用 watch 但總是觸發，可以添加 flush: ‘sync’ 選項：

watch(() => sum.a + sum.b,(value) => {console.log('執行回調sum:', value)},{ deep: true, flush: 'sync' }
)

總結:
默認情況下 watch 只在返回值變化時觸發
deep: true 會讓它追蹤依賴項的變化，即使返回值相同也會觸發

4：reactive監聽對象

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2,c: 3
})watch(//source() => {console.log('x:', sum.c)return sum.a + sum.b},//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.c++console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

分析：一開始先執行source方法所以打印了x:3，又因為一秒后修改了c的值，同時source中對c有監聽，所以又執行了一次source，但是因為返回的都是a+b，返回值沒有變化，所以不執行回調函數（cb）

5：reactive監聽對象

watch(//source() => {console.log('x:', sum.c = 10)  //修改了 `sum.c`，但沒有 **讀取** 它（不是依賴）return sum.a    // 只有 `sum.a` 被 **讀取**，所以 Vue 只監聽 `sum.a` 的變化},//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.c++console.log('執行定時器了')
}, 1000)

執行結果如下

在這里插入圖片描述

5-1：reactive監聽對象

watch(//source() => {console.log('x:', sum.c === 10)  //讀取 `sum.c`， **讀取** 它（是依賴）return sum.a  // 只有 `sum.a` 被 **讀取**，所以 Vue 只監聽 `sum.a` 的變化},//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.c++console.log('執行定時器了')
}, 1000

執行結果如下

在這里插入圖片描述

總結：如果 getter 函數內部有代碼修改了響應式數據（如 sum.c = 10），但 沒有讀取它，則 Vue 不會 將其視為依賴，因此不會觸發重新執行，（sum.c === 10)，讀取它，則 Vue 會 將其視為依賴，會觸發重新執行

6：在 Vue 3 的 watch API 中，reactive的對象，使用函數返回值 () => sum 和直接使用 sum 作為偵聽源（source）有重要區別

6-1：reactive的對象執行結果

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({person: { age: 18, name: '張三' },b: 2,c: 3
})watch(// source() => {console.log('x')return sum},// sum,//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.person.name = '李四'console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

6-2：reactive的對象執行結果

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({person: { age: 18, name: '張三' },b: 2,c: 3
})watch(// source// () => {//   console.log('x')//   return sum// },sum,//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.person.name = '李四'console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

總結區別：

方式監聽目標深度監聽適合場景
watch(sum, cb)整個響應式對象自動開啟需要深度監聽所有變化
watch(() => sum, cb)對象的引用不開啟幾乎無用（reactive 引用不變）
watch(() => sum.xxx, cb)特定屬性不開啟精確監聽特定屬性

7：在 Vue 3 的 watch API 中，ref的對象，使用函數返回值 () => sum 和直接使用 sum 作為偵聽源（source）有重要區別

7-1：ref的對象執行結果

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = ref({person: { age: 18, name: '張三' },b: 2,c: 3
})watch(// source// () => {//   console.log('x')//   return sum.value// },sum,//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.value.person.name = '李四'console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

7-2：ref的對象執行結果

<template><div><h1>情況二：watchEffect自動監視數據</h1><h2>兩個數字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = ref({person: { age: 18, name: '張三' },b: 2,c: 3
})watch(// source() => {console.log('x')return sum.value},// sum,//cb(value) => {console.log('執行回調sum:', value)}
)setTimeout(() => {sum.value.person.name = '李四'console.log('執行定時器了')
}, 1000)
</script>
<style scoped></style>

執行結果如下

在這里插入圖片描述

總結區別：

監聽方式觸發條件深度監聽適用場景
watch(sum, cb)僅 sum.value = newObj 時觸發?監聽整個 ref 替換
watch(sum.value, cb)同理成reactive深度監聽嵌套變化（不推薦）?不推薦（可能丟失響應性）
watch(() => sum.value, cb, { deep: true })深度監聽嵌套變化?推薦（清晰且可控）
watch(() => sum.value.xxx, cb)僅監聽特定屬性?精確監聽，性能優化

注意：如果使用ref包裹的對象，使用ref.value得到后是一個代理，就同理成reactive

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/82339.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/82339.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/82339.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

醫學寫作供應商管理全流程優化

醫學寫作供應商管理全流程優化

1. 供應商篩選與評估 1.1 資質審核 1.1.1 行業認證核查 核查供應商的行業認證，如AMWA醫學寫作認證、EMWA會員資格、ISO 9001等，確保其專業資質。 1.1.2 團隊背景評估 評估團隊成員專業背景，包括醫學/藥學學位、臨床試驗經驗、發表記錄，保障專業能力。 1.1.3 國際規范熟悉…
閱讀更多...
固態硬盤顆粒類型、選型與應用場景深度解析

固態硬盤顆粒類型、選型與應用場景深度解析

一、固態硬盤顆粒類型的技術演進與特性 固態硬盤&#xff08;SSD&#xff09;的性能核心在于存儲單元結構的設計&#xff0c;這種設計直接決定了數據的存儲密度、讀寫速度、耐久度及成本效益。當前主流的閃存顆粒類型呈現從單層到多層架構的梯度演進&#xff0c;其技術特征與應…
閱讀更多...
CAPL自動化-診斷Demo工程

CAPL自動化-診斷Demo工程

文章目錄 前言一、診斷控制面板二、診斷定義三、發送診斷通過類.方法的方式req.SetParameterdiagSetParameter四、SendRequestAndWaitForResponse前言 本文將介紹CANoe的診斷自動化測試，工程可以從CANoe的 Sample Configruration 界面打開，也可以參考下面的路徑中打開（以實…
閱讀更多...
嵌入式預處理鏈接腳本lds和map文件

嵌入式預處理鏈接腳本lds和map文件

在嵌入式開發中&#xff0c;.lds.S 文件是一個 預處理后的鏈接腳本&#xff08;Linker Script&#xff09;&#xff0c;它結合了 C 預處理器&#xff08;Preprocessor&#xff09; 的功能和鏈接腳本的語法。它的核心作用仍然是 定義內存布局和鏈接規則&#xff0c;但通過預處理…
閱讀更多...
PT5F2307觸摸A/D型8-Bit MCU

PT5F2307觸摸A/D型8-Bit MCU

1. 產品概述 ● PT5F2307是一款51內核的觸控A/D型8位MCU&#xff0c;內置16K*8bit FLASH、內部256*8bit SRAM、外部512*8bit SRAM、觸控檢測、12位高精度ADC、RTC、PWM等功能&#xff0c;抗干擾能力強&#xff0c;適用于滑條遙控器、智能門鎖、消費類電子產品等電子應用領域。 …
閱讀更多...
RabbitMQ——消息確認

RabbitMQ——消息確認

一、消息確認機制 生產者發送的消息&#xff0c;可能有以下兩種情況&#xff1a; 1> 消息消費成功 2> 消息消費失敗 為了保證消息可靠的到達消費者&#xff08;&#xff01;&#xff01;&#xff01;注意&#xff1a;消息確認機制和前面的工作模式中的publisher confi…
閱讀更多...
C++異步(1)

C++異步(1)

什么是異步? 異步就是多個線程是同時執行的&#xff0c;與之相對的就是線程同步&#xff0c;二者都應用在并發的場景上。 異步的特點 異步執行的任務無需等待其他任務完成&#xff0c;其本身是通過非阻塞的方式執行的&#xff0c;不依賴前驅任務&#xff0c;通常用于IO密集…
閱讀更多...
向量數據庫Milvus03-高級功能與性能調優

向量數據庫Milvus03-高級功能與性能調優

Milvus高級功能與性能調優 目錄 高級特性詳解性能調優技巧生產環境部署最佳實踐總結與展望 1. 高級特性詳解 1.1 多索引兼容 Milvus 支持多種索引類型&#xff08;如 HNSW、IVF_PQ、IVF_FLAT&#xff09;的混合使用&#xff0c;以適應不同場景的需求。 HNSW&#xff08;Hier…
閱讀更多...
5月24日day35打卡

5月24日day35打卡

模型可視化與推理 知識點回顧&#xff1a; 三種不同的模型可視化方法&#xff1a;推薦torchinfo打印summary權重分布可視化進度條功能&#xff1a;手動和自動寫法&#xff0c;讓打印結果更加美觀推理的寫法&#xff1a;評估模式 作業&#xff1a;調整模型定義時的超參數&#x…
閱讀更多...
野火魯班貓(arrch64架構debian)從零實現用MobileFaceNet算法進行實時人臉識別（三）用yolov5-face算法實現人臉檢測

野火魯班貓(arrch64架構debian)從零實現用MobileFaceNet算法進行實時人臉識別（三）用yolov5-face算法實現人臉檢測

環境直接使用第一篇中安裝好的環境即可 先clone yolov5-face項目 git clone https://github.com/deepcam-cn/yolov5-face.git 并下載預訓練權重文件yolov5n-face.pt 網盤鏈接: https://pan.baidu.com/s/1xsYns6cyB84aPDgXB7sNDQ 提取碼: lw9j &#xff08;野火官方提供&am…
閱讀更多...
R語言科研編程-柱狀圖

R語言科研編程-柱狀圖

R語言簡介 R語言是一種開源的統計計算和圖形繪制編程語言&#xff0c;廣泛應用于數據分析、機器學習、數據可視化等領域。它由Ross Ihaka和Robert Gentleman于1993年開發&#xff0c;具有豐富的統計函數庫和圖形功能&#xff0c;尤其適合數據科學研究和可視化任務。 使用R語言…
閱讀更多...
Android-Handler學習總結

Android-Handler學習總結

??面試官?&#xff1a;你好&#xff01;我看你簡歷里提到熟悉 Android 的 Handler 機制&#xff0c;能簡單說一下它的作用嗎&#xff1f; ?候選人?&#xff1a; Handler 是 Android 中用來做線程間通信的工具。比如Android 應用的 UI 線程&#xff08;也叫主線程…
閱讀更多...
【iOS】分類、擴展、關聯對象

【iOS】分類、擴展、關聯對象

分類、擴展、關聯對象 前言分類擴展擴展和分類的區別關聯對象key的幾種用法流程 總結 前言 最近的學習中筆者發現自己對于分類、擴展相關知識并不是很熟悉&#xff0c;剛好看源碼類的加載過程中發現有類擴展與關聯對象詳解。本篇我們來探索一下這部分相關知識&#xff0c;首先…
閱讀更多...
30.第二階段x64游戲實戰-認識網絡數據包發送流程

30.第二階段x64游戲實戰-認識網絡數據包發送流程

免責聲明&#xff1a;內容僅供學習參考&#xff0c;請合法利用知識&#xff0c;禁止進行違法犯罪活動&#xff01; 內容參考于&#xff1a;圖靈Python學院 上一個內容&#xff1a;29.第二階段x64游戲實戰-技能冷卻 發送數據包的方式&#xff08;函數&#xff09;操作系統提供…
閱讀更多...
【每日一題】【前綴和優化】【前/后綴最值】牛客練習賽139 B/C題 大衛的密碼 (Hard Version) C++

【每日一題】【前綴和優化】【前/后綴最值】牛客練習賽139 B/C題 大衛的密碼 (Hard Version) C++

牛客練習賽139 B題 大衛的密碼 (Easy Version) 牛客練習賽139 C題 大衛的密碼 (Hard Version) 大衛的密碼 題目背景 牛客練習賽139 題目描述 給定一個 n m n\times m nm的網格圖&#xff0c;我們使用 ( i , j ) (i,j) (i,j)表示網格中從上往下數第 i i i行和從左往右數第…
閱讀更多...
文件夾圖像批處理教程

文件夾圖像批處理教程

前言 因為經常對圖像要做數據清洗&#xff0c;又很費時間去重新寫一個&#xff0c;我一直在想能不能寫一個通用的腳本或者制作一個可視化的界面對文件夾圖像做批量的修改圖像大小、重命名、劃分數據訓練和驗證集等等。這里我先介紹一下我因為寫過的一些腳本&#xff0c;然后我…
閱讀更多...
【Unity實戰筆記】第二十四 · 使用 SMB+Animator 實現基礎戰斗系統

【Unity實戰筆記】第二十四 · 使用 SMB+Animator 實現基礎戰斗系統

轉載請注明出處&#xff1a;&#x1f517;https://blog.csdn.net/weixin_44013533/article/details/146409453 作者&#xff1a;CSDN|Ringleader| 1 結構 1.1 狀態機 1.2 SMB 2 代碼實現 2.1 核心控制 Player_Base_SMB 繼承 StateMachineBehaviour &#xff0c;控制變量初始…
閱讀更多...
Python虛擬環境再PyCharm中自由切換使用方法

Python虛擬環境再PyCharm中自由切換使用方法

Python開發中的環境隔離是必不可少的步驟，通過使用虛擬環境可以有效地管理不同項目間的依賴，避免包沖突和環境污染。虛擬環境是Python官方提供的一種獨立運行環境，每個項目可以擁有自己單獨的環境，不同項目之間的環境互不影響。在日常開發中，結合PyCharm這樣強大的IDE進行…
閱讀更多...
大模型智能體入門掃盲——基于camel的概述

大模型智能體入門掃盲——基于camel的概述

前言 本篇博客想帶讀者進行一個智能體入門掃盲&#xff0c;了解基礎知識&#xff0c;為什么用camel呢&#xff0c;因為小洛發現它們文檔對這種智能體的基本組件介紹得很全面深入。 基礎概念 agent 一個典型的agent智能體包含三個核心部分&#xff1a; 感知模塊&#xff1…
閱讀更多...
目標檢測 RT-DETR（2023）詳細解讀

目標檢測 RT-DETR（2023）詳細解讀

文章目錄 主干網絡&#xff1a;Encoder&#xff1a;不確定性最小Query選擇Decoder網絡&#xff1a; 將DETR擴展到實時場景&#xff0c;提高了模型的檢測速度。網絡架構分為三部分組成&#xff1a;主干網絡、混合編碼器、帶有輔助預測頭的變換器編碼器。具體來說&#xff0c;先利…
閱讀更多...
最新文章

Copyright @ 2022~2023