建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
本節(jié)使用單文件組件語(yǔ)法作為代碼示例
創(chuàng)新互聯(lián)公司專(zhuān)注于儀征網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供儀征營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，儀征網(wǎng)站制作、儀征網(wǎng)頁(yè)設(shè)計(jì)、儀征網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造儀征網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供儀征網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
#計(jì)算值
有時(shí)我們需要依賴(lài)于其他狀態(tài)的狀態(tài)——在 Vue 中，這是用組件計(jì)算屬性處理的，以直接創(chuàng)建計(jì)算值，我們可以使用 computed 方法：它接受 getter 函數(shù)并為 getter 返回的值返回一個(gè)不可變的響應(yīng)式 ref 對(duì)象。
const count = ref(1)
const plusOne = computed(() => count.value++)
console.log(plusOne.value) // 2
plusOne.value++ // error 或者，它可以使用一個(gè)帶有 get 和 set 函數(shù)的對(duì)象來(lái)創(chuàng)建一個(gè)可寫(xiě)的 ref 對(duì)象。
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value) // 0#watchEffect
為了根據(jù)響應(yīng)式狀態(tài)自動(dòng)應(yīng)用和重新應(yīng)用副作用，我們可以使用 watchEffect 方法。它立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴(lài)，并在其依賴(lài)變更時(shí)重新運(yùn)行該函數(shù)。
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
setTimeout(() => {
count.value++
// -> logs 1
}, 100)#停止偵聽(tīng)
當(dāng) watchEffect 在組件的 setup() 函數(shù)或生命周期鉤子被調(diào)用時(shí)，偵聽(tīng)器會(huì)被鏈接到該組件的生命周期，并在組件卸載時(shí)自動(dòng)停止。
在一些情況下，也可以顯式調(diào)用返回值以停止偵聽(tīng)：
const stop = watchEffect(() => {
/* ... */
})
// later
stop()#清除副作用
有時(shí)副作用函數(shù)會(huì)執(zhí)行一些異步的副作用，這些響應(yīng)需要在其失效時(shí)清除 (即完成之前狀態(tài)已改變了) 。所以偵聽(tīng)副作用傳入的函數(shù)可以接收一個(gè) onInvalidate 函數(shù)作入?yún)?，用?lái)注冊(cè)清理失效時(shí)的回調(diào)。當(dāng)以下情況發(fā)生時(shí)，這個(gè)失效回調(diào)會(huì)被觸發(fā)：
- 副作用即將重新執(zhí)行時(shí)
- 偵聽(tīng)器被停止 (如果在
setup()或生命周期鉤子函數(shù)中使用了watchEffect，則在組件卸載時(shí))
watchEffect(onInvalidate => {
const token = performAsyncOperation(id.value)
onInvalidate(() => {
// id has changed or watcher is stopped.
// invalidate previously pending async operation
token.cancel()
})
})我們之所以是通過(guò)傳入一個(gè)函數(shù)去注冊(cè)失效回調(diào)，而不是從回調(diào)返回它，是因?yàn)榉祷刂祵?duì)于異步錯(cuò)誤處理很重要。
在執(zhí)行數(shù)據(jù)請(qǐng)求時(shí)，副作用函數(shù)往往是一個(gè)異步函數(shù)：
const data = ref(null)
watchEffect(async onInvalidate => {
onInvalidate(() => {...}) // 我們?cè)赑romise解析之前注冊(cè)清除函數(shù)
data.value = await fetchData(props.id)
})我們知道異步函數(shù)都會(huì)隱式地返回一個(gè) Promise，但是清理函數(shù)必須要在 Promise 被 resolve 之前被注冊(cè)。另外，Vue 依賴(lài)這個(gè)返回的 Promise 來(lái)自動(dòng)處理 Promise 鏈上的潛在錯(cuò)誤。
#副作用刷新時(shí)機(jī)
Vue 的響應(yīng)性系統(tǒng)會(huì)緩存副作用函數(shù)，并異步地刷新它們，這樣可以避免同一個(gè)“tick” 中多個(gè)狀態(tài)改變導(dǎo)致的不必要的重復(fù)調(diào)用。在核心的具體實(shí)現(xiàn)中，組件的 update 函數(shù)也是一個(gè)被偵聽(tīng)的副作用。當(dāng)一個(gè)用戶(hù)定義的副作用函數(shù)進(jìn)入隊(duì)列時(shí)，默認(rèn)情況下，會(huì)在所有的組件 update 前執(zhí)行：
{{ count }}
在這個(gè)例子中：
count會(huì)在初始運(yùn)行時(shí)同步打印出來(lái)- 更改
count時(shí)，將在組件更新前執(zhí)行副作用。
如果需要在組件更新后重新運(yùn)行偵聽(tīng)器副作用，我們可以傳遞帶有 flush 選項(xiàng)的附加 options 對(duì)象 (默認(rèn)為 'pre')：
// fire before component updates
watchEffect(
() => {
/* ... */
},
{
flush: 'post'
}
) flush 選項(xiàng)還接受 sync，這將強(qiáng)制效果始終同步觸發(fā)。然而，這是低效的，應(yīng)該很少需要。
#偵聽(tīng)器調(diào)試
onTrack 和 onTrigger 選項(xiàng)可用于調(diào)試偵聽(tīng)器的行為。
onTrack將在響應(yīng)式 property 或 ref 作為依賴(lài)項(xiàng)被追蹤時(shí)被調(diào)用。onTrigger將在依賴(lài)項(xiàng)變更導(dǎo)致副作用被觸發(fā)時(shí)被調(diào)用。
這兩個(gè)回調(diào)都將接收到一個(gè)包含有關(guān)所依賴(lài)項(xiàng)信息的調(diào)試器事件。建議在以下回調(diào)中編寫(xiě) debugger 語(yǔ)句來(lái)檢查依賴(lài)關(guān)系：
watchEffect(
() => {
/* 副作用 */
},
{
onTrigger(e) {
debugger
}
}
) onTrack 和 onTrigger 只能在開(kāi)發(fā)模式下工作。
#watch
watch API 完全等同于組件偵聽(tīng)器 property。watch 需要偵聽(tīng)特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用。默認(rèn)情況下，它也是惰性的，即只有當(dāng)被偵聽(tīng)的源發(fā)生變化時(shí)才執(zhí)行回調(diào)。
- 與 watchEffect 比較，
watch允許我們：- 懶執(zhí)行副作用；
- 更具體地說(shuō)明什么狀態(tài)應(yīng)該觸發(fā)偵聽(tīng)器重新運(yùn)行；
- 訪問(wèn)偵聽(tīng)狀態(tài)變化前后的值。
#偵聽(tīng)單個(gè)數(shù)據(jù)源
偵聽(tīng)器數(shù)據(jù)源可以是返回值的 getter 函數(shù)，也可以直接是 ref：
// 偵聽(tīng)一個(gè) getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接偵聽(tīng)ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})#偵聽(tīng)多個(gè)數(shù)據(jù)源
偵聽(tīng)器還可以使用數(shù)組同時(shí)偵聽(tīng)多個(gè)源：
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})#與 watchEffect 共享的行為
watch 與 watchEffect共享停止偵聽(tīng)，清除副作用 (相應(yīng)地 onInvalidate 會(huì)作為回調(diào)的第三個(gè)參數(shù)傳入)、副作用刷新時(shí)機(jī)和偵聽(tīng)器調(diào)試行為。
本文標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0響應(yīng)式計(jì)算和偵聽(tīng)
本文網(wǎng)址：http://www.5511xx.com/article/dphocgd.html
