建站
咨詢
售后
建站咨詢
新聞中心
你可以認為他們是同一個功能的兩種不同形態(tài)，底層的實現(xiàn)是一樣的。
在觀山湖等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供做網(wǎng)站、成都網(wǎng)站建設 網(wǎng)站設計制作按需策劃,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站設計,營銷型網(wǎng)站,外貿營銷網(wǎng)站建設,觀山湖網(wǎng)站建設費用合理。
- watch- 顯式指定依賴源，依賴源更新時執(zhí)行回調函數(shù)
- watchEffect - 自動收集依賴源，依賴源更新時重新執(zhí)行自身
響應式依賴收集
首先先需要了解一下 vue 3 的響應式是怎么工作的。我想很多文章都詳細的講過這個部分了，這里就簡單帶過一下。這里有個簡化版的 ref 的實現(xiàn)：
const ref = (initialValue) => { let _value = initialValue return { get value() {
track(this, 'value') // 收集依賴
return _value
}, set value() {
_value = value
trigger(this, 'value') // 觸發(fā)依賴
}
}
}訪問數(shù)據(jù)時，track 被呼叫并記錄下訪問了的字段。而當寫入數(shù)據(jù)時，trigger 被呼叫并觸發(fā)之前所依賴了這個字段所綁定事件更新（即 effect - computed, watch, watchEffect 底層都是 effect），他們會被記錄在一個全局的 WeakMap 中，這里就不展開了，感興趣可以去看源碼。
const counter = ref(1)
console.log(counter.value) // `track()` 被呼叫
counter.value = 2 // `trigger()` 被呼叫
當我們需要函數(shù)里的依賴時，只需要記錄函數(shù)執(zhí)行的過程中 track()被呼叫的次數(shù)（和對應的對象與字段）即可。例如：
const counter = ref(1)function foo() { console.log(counter.value)
}function collectDeps() {
startTracking()
foo() // 在這個過程中，counter 被收集
stopTracking()
}這樣便可以知道 foo 這個函數(shù)依賴了 counter。
Watch
一個 generalised 的 watch api 應該是這樣的（其他類似直接接受 ref 或者 reactive 作為參數(shù)的其實都是糖）。
watch(
() => { /* 依賴源收集函數(shù) */ },
() => { /* 依賴源改變時的回調函數(shù) */ }
)
這里的依賴源函數(shù)只會執(zhí)行一次，回調函數(shù)會在每次依賴源改變的時候觸發(fā)，但是并不對回調函數(shù)進行依賴收集。也就是說，依賴源和回調函數(shù)之間并不一定要有直接關系。
WatchEffect
watchEffect 相當于將 watch 的依賴源和回調函數(shù)合并，當任何你有用到的響應式依賴更新時，該回調函數(shù)便會重新執(zhí)行。
不同于 watch，watchEffect 的回調函數(shù)會被立即執(zhí)行（即 { immediate: true }）。
watchEffect(
() => { /* 依賴源同時是回調函數(shù) */ }
)
以下兩種用法在行為上基本等價：
watchEffect( () => console.log(counter.value)
)
watch( () => counter.value, () => console.log(counter.value),
{ immediate: true }
)
與 watch 不同的一點是，在 watchEffect 中依賴源會被重復執(zhí)行，動態(tài)新增加的依賴也會被收集，例如：
const counter = ref(0)const enabled = ref(false)
watchEffect(() => { if (enabled.value)
console.log(counter.value)
})// (以下忽略 nextTick)// watchEffect 會被立即執(zhí)行，因為 “enabled“ 為 false, 此時僅收集到 “enabled“ 依賴counter.value += 1 // 無反應enabled.value = true // Effect 觸發(fā)，控制臺出 "1"counter.value += 1 // “counter“ 被作為新的依賴被收集，控制臺出 "2"enabled.value = false // 函數(shù)被重新執(zhí)行，無輸出counter.value += 1 // 函數(shù)被重新執(zhí)行，無輸出 (雖然 counter 已經沒有用了，但是作為依賴還是會觸發(fā)函數(shù)）
順帶一提，computed 其實類似一個帶輸出的同步版本的 watchEffect。
什么時候用什么？
推薦在大部分時候用 watch 顯式的指定依賴以避免不必要的重復觸發(fā)，也避免在后續(xù)代碼修改或重構時不小心引入新的依賴。watchEffect 適用于一些邏輯相對簡單，依賴源和邏輯強相關的場景（或者懶惰的場景 ）。
分享標題：Vue3中watch與watchEffect有什么區(qū)別？
本文URL：http://www.5511xx.com/article/dhjocde.html
