MpxUsewatchTriggerable
可手动触发的监视
用法
支持手动触发WatchCallback的watch包装器，它返回一个额外的trigger以立即执行WatchCallback。
ts
import { watchTriggerable } from '@mpxjs/mpxuse-core'
import { nextTick, ref } from 'vue'
const source = ref(0)
const { trigger, ignoreUpdates } = watchTriggerable(
source,
v => console.log(`Changed to ${v}!`),
)
source.value = 'bar'
await nextTick() // logs: Changed to bar!
// Execution of WatchCallback via `trigger` does not require waiting
trigger() // logs: Changed to bar!
import { watchTriggerable } from '@mpxjs/mpxuse-core'
import { nextTick, ref } from 'vue'
const source = ref(0)
const { trigger, ignoreUpdates } = watchTriggerable(
source,
v => console.log(`Changed to ${v}!`),
)
source.value = 'bar'
await nextTick() // logs: Changed to bar!
// Execution of WatchCallback via `trigger` does not require waiting
trigger() // logs: Changed to bar!
onCleanup
当您想要手动调用使用onCleanup参数的watch时；简单地取出WatchCallback并调用它并不容易实现onCleanup参数。
使用watchTriggerable解决此问题。
ts
import { watchTriggerable } from '@mpxjs/mpxuse-core'
import { ref } from 'vue'
const source = ref(0)
const { trigger } = watchTriggerable(
source,
async (v, _, onCleanup) => {
let canceled = false
onCleanup(() => canceled = true)
await new Promise(resolve => setTimeout(resolve, 500))
if (canceled)
return
console.log(`The value is "${v}"\n`)
},
)
source.value = 1 // no log
await trigger() // logs (after 500 ms): The value is "1"
import { watchTriggerable } from '@mpxjs/mpxuse-core'
import { ref } from 'vue'
const source = ref(0)
const { trigger } = watchTriggerable(
source,
async (v, _, onCleanup) => {
let canceled = false
onCleanup(() => canceled = true)
await new Promise(resolve => setTimeout(resolve, 500))
if (canceled)
return
console.log(`The value is "${v}"\n`)
},
)
source.value = 1 // no log
await trigger() // logs (after 500 ms): The value is "1"
Type Declarations
Show Type Declarations
typescript
export interface WatchTriggerableReturn<FnReturnT = void>
extends WatchIgnorableReturn {
/** Execute `WatchCallback` immediately */
trigger: () => FnReturnT
}
declare type OnCleanup = (cleanupFn: () => void) => void
export declare type WatchTriggerableCallback<V = any, OV = any, R = void> = (
value: V,
oldValue: OV,
onCleanup: OnCleanup
) => R
export declare function watchTriggerable<
T extends Readonly<WatchSource<unknown>[]>,
FnReturnT
>(
sources: [...T],
cb: WatchTriggerableCallback<
MapSources<T>,
MapOldSources<T, true>,
FnReturnT
>,
options?: WatchWithFilterOptions
): WatchTriggerableReturn<FnReturnT>
export declare function watchTriggerable<T, FnReturnT>(
source: WatchSource<T>,
cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
options?: WatchWithFilterOptions
): WatchTriggerableReturn<FnReturnT>
export declare function watchTriggerable<T extends object, FnReturnT>(
source: T,
cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
options?: WatchWithFilterOptions
): WatchTriggerableReturn<FnReturnT>
export interface WatchTriggerableReturn<FnReturnT = void>
extends WatchIgnorableReturn {
/** Execute `WatchCallback` immediately */
trigger: () => FnReturnT
}
declare type OnCleanup = (cleanupFn: () => void) => void
export declare type WatchTriggerableCallback<V = any, OV = any, R = void> = (
value: V,
oldValue: OV,
onCleanup: OnCleanup
) => R
export declare function watchTriggerable<
T extends Readonly<WatchSource<unknown>[]>,
FnReturnT
>(
sources: [...T],
cb: WatchTriggerableCallback<
MapSources<T>,
MapOldSources<T, true>,
FnReturnT
>,
options?: WatchWithFilterOptions
): WatchTriggerableReturn<FnReturnT>
export declare function watchTriggerable<T, FnReturnT>(
source: WatchSource<T>,
cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
options?: WatchWithFilterOptions
): WatchTriggerableReturn<FnReturnT>
export declare function watchTriggerable<T extends object, FnReturnT>(
source: T,
cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
options?: WatchWithFilterOptions
): WatchTriggerableReturn<FnReturnT>
源码
贡献者
pagnkelly