vue3如何進行資料監聽watch/watchEffect
我們都知道監聽器的作用是在每次響應式狀態發生變化時觸發,在組合式 API 中,我們可以使用 watch()函式和watchEffect()函式,
當你更改了響應式狀態,它可能會同時觸發 Vue 元件更新和偵聽器回撥。
預設情況下,使用者建立的偵聽器回撥,都會在 Vue 元件更新之前被呼叫。這意味著你在偵聽器回撥中訪問的 DOM 將是被 Vue 更新之前的狀態。
那麼,我們來看一下,怎麼才能好好的使用他們呢?他們之間又有什麼區別呢?
watch 需要偵聽特定的資料來源,比如偵聽一個 ref,watch 的第一個引數可以是不同形式的“資料來源”:它可以是一個 ref (包括計算屬性)、一個響應式物件、一個 getter 函式、或多個資料來源組成的陣列,如下:
const x = ref(0) const y = ref(0) // 單個 ref watch(x, (newX) => { console.log(`x is ${newX}`) }) // getter 函式 watch( () => x.value + y.value, (sum) => { console.log(`sum of x + y is: ${sum}`) } ) // 多個來源組成的陣列 watch([x, () => y.value], ([newX, newY]) => { console.log(`x is ${newX} and y is ${newY}`) }) const obj = reactive({ count: 0 }) //傳入一個響應式物件 watch(obj, (newValue, oldValue) => { // 在巢狀的屬性變更時觸發 // 注意:`newValue` 此處和 `oldValue` 是相等的 // 因為它們是同一個物件! }) obj.count++ watch( () => obj.count, (newValue, oldValue) => { // 注意:`newValue` 此處和 `oldValue` 是相等的 // *除非* obj.count 被整個替換了 }, { deep: true } )
注意,你不能直接偵聽響應式物件的屬性值
const obj = reactive({ count: 0 }) // 錯誤,因為 watch() 得到的引數是一個 number watch(obj.count, (count) => { console.log(`count is: ${count}`) })
這裡需要用一個返回該屬性的 getter 函式:
// 提供一個 getter 函式 watch( () => obj.count, (count) => { console.log(`count is: ${count}`) } )
watch 預設是懶執行的:僅當資料來源變化時,才會執行回撥。但在某些場景中,我們希望在建立偵聽器時,立即執行一遍回撥。舉例來說,我們想請求一些初始資料,然後在相關狀態更改時重新請求資料。
我們可以透過傳入 immediate: true 選項來強制偵聽器的回撥立即執行:
watch(source, (newValue, oldValue) => { // 立即執行,且當 `source` 改變時再次執行 }, { immediate: true })
watchEffect() 允許我們自動跟蹤回撥的響應式依賴。
const todoId = ref(1) const data = ref(null) watchEffect(async () => { const response = await fetch( `{todoId.value}` ) data.value = await response.json() })
這個例子中,回撥會立即執行,不需要指定 immediate: true。在執行期間,它會自動追蹤 todoId.value 作為依賴(和計算屬性類似)。每當 todoId.value 變化時,回撥會再次執行。有了 watchEffect(),我們不再需要明確傳遞 todoId 作為源值。
watchEffect() 適合有多個依賴項的偵聽器對於這種只有一個依賴項的例子來說,好處相對較小。此外,如果你需要偵聽一個巢狀資料結構中的幾個屬性,watchEffect() 可能會比深度偵聽器更有效,因為它將只跟蹤回撥中被使用到的屬性,而不是遞迴地跟蹤所有的屬性。
如果想在偵聽器回撥中能訪問被 Vue 更新之後的 DOM,你需要指明 flush: ‘post’ 選項,後置重新整理的 watchEffect() 有個更方便的別名 watchPostEffect():
import { watchPostEffect } from 'vue' watchPostEffect(() => { /* 在 Vue 更新後執行 */ })
watch 和 watchEffect 都能響應式地執行有副作用的回撥。它們之間的主要區別是追蹤響應式依賴的方式:
watch 只追蹤明確偵聽的資料來源。它不會追蹤任何在回撥中訪問到的東西。另外,僅在資料來源確實改變時才會觸發回撥。watch 會避免在發生副作用時追蹤依賴,因此,我們能控制回撥函式的觸發時機。
watchEffect,則會在副作用發生期間追蹤依賴。它會在同步執行過程中,自動追蹤所有能訪問到的響應式屬性。這更方便,而且程式碼往往更簡潔,但有時其響應性依賴關係會不那麼明確。適合有多個依賴項的偵聽器
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901823/viewspace-2941733/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- vue3保證你看懂watch和watchEffect的詳細詳細使用Vue
- vue3 watch方法---監視基本型別資料Vue型別
- 前端學習-vue影片學習006-watch監視、watchEffect前端Vue
- 監聽 watch props物件屬性監聽 或深度監聽物件
- Vue3 為何使用 Proxy 實現資料監聽Vue
- 微信小程式,實現 watch 屬性,監聽資料變化微信小程式
- vue 3 學習筆記 (六)——watch 、watchEffect 新用法Vue筆記
- 【原始碼系列#04】Vue3偵聽器原理(Watch)原始碼Vue
- vue2的監聽watch小爆料Vue
- Oracle資料庫監聽Oracle資料庫
- 021、Vue3+TypeScript基礎,使用watchEffect全自動監視修改的物件VueTypeScript物件
- 啟動資料庫監聽資料庫
- 設定USB資料監聽
- 資料庫開啟監聽資料庫
- TDengine 如何進行資料建模?
- 大資料如何進行分析大資料
- Vue:watch 監聽多個屬性值的方法Vue
- vue外掛——滾動監聽 vue-scrollwatchVue
- vue2-使用watch監聽路由的變化Vue路由
- 配置資料庫監聽白名單資料庫
- Mysql資料庫監聽binlogMySql資料庫
- 資料庫監聽夯故障分析資料庫
- 自定義元件-資料監聽器元件
- 觀察者模式,無需多執行緒完成資料監聽模式執行緒
- Vue_watch深度監聽的正確開啟方式Vue
- HarmonyOS-基礎之@Watch監聽、@ObjectLink和@ObservedObject
- 大資料分析該如何進行大資料
- 監聽狀態正常,但是資料庫不能連線,提示沒有監聽....資料庫
- 如何進行 Python效能分析,你才能如魚得水?Python
- 企業內部資料如何進行資料分析
- 【Vue2.x原始碼系列07】監聽器watch原理Vue原始碼
- SAP系統如何進行資料拆分?
- Oracle資料庫修改LISTENER的監聽埠Oracle資料庫
- 11.2資料庫監聽的改變資料庫
- 清理資料庫監聽日誌最好方法資料庫
- 資料治理的興與衰,如何進行資料治理?
- 在Linux中,如何進行系統資源的監控?Linux
- entity bean如何進行資料的大量更新Bean