Skip to content

watchExtractedObservable

类别
导出体积
264 B
依赖包
@vueuse/rxjs
上次更改
2 days ago

监视从一个或多个组合式中提取的 RxJS Observable 的值。

在可观察对象发生变化时自动取消订阅,并在组件卸载时自动取消订阅。

支持与 watch 的所有重载签名匹配的签名。 Available in the @vueuse/rxjs add-on.

用法

ts
import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, shallowRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'

// setup()

const audio = shallowRef<HTMLAudioElement>()
const player = computed(() => (audio.value ? new AudioPlayer(audio) : null))
const state = reactive({
  progress: 0,
})

watchExtractedObservable(player, p => p.progress$, (percentage) => {
  state.progress = percentage * 100
})
js
import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, shallowRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'
// setup()
const audio = shallowRef()
const player = computed(() => (audio.value ? new AudioPlayer(audio) : null))
const state = reactive({
  progress: 0,
})
watchExtractedObservable(
  player,
  (p) => p.progress$,
  (percentage) => {
    state.progress = percentage * 100
  },
)

如果你想要为可能出错的 Observable 添加自定义错误处理,你可以提供一个可选的 onError 配置。如果没有提供,RxJS 将把提供的 observable 中的任何错误视为 “未处理的错误”,并且它将在一个新的调用栈中抛出,并报告给 window.onerror (或者如果你恰好在 Node 中,则为 process.on('error'))。

你还可以提供一个可选的 onComplete 配置,如果需要在观察到的可观察对象完成时附加特殊行为。

ts
import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, shallowRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'

// setup()

const audio = shallowRef<HTMLAudioElement>()
const player = computed(() => (audio.value ? new AudioPlayer(audio) : null))
const state = reactive({
  progress: 0,
})

watchExtractedObservable(player, p => p.progress$, (percentage) => {
  state.progress = percentage * 100
}, {
  onError: (err: unknown) => {
    console.error(err)
  },
  onComplete: () => {
    state.progress = 100 // 或者 0,或者其他任何值
  },
})
js
import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, shallowRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'
// setup()
const audio = shallowRef()
const player = computed(() => (audio.value ? new AudioPlayer(audio) : null))
const state = reactive({
  progress: 0,
})
watchExtractedObservable(
  player,
  (p) => p.progress$,
  (percentage) => {
    state.progress = percentage * 100
  },
  {
    onError: (err) => {
      console.error(err)
    },
    onComplete: () => {
      state.progress = 100 // 或者 0,或者其他任何值
    },
  },
)

如果需要,你还可以将 watch 选项作为最后一个参数传递:

ts
import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, shallowRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'

// setup()

const audio = shallowRef<HTMLAudioElement>()
const player = computed(() => (audio.value ? new AudioPlayer(audio) : null))
const state = reactive({
  progress: 0,
})

watchExtractedObservable(player, p => p.progress$, (percentage) => {
  state.progress = percentage * 100
}, {
  onError: (err: unknown) => {
    console.error(err)
  }
}, {
  immediate: true
})
js
import { watchExtractedObservable } from '@vueuse/rxjs'
import { computed, reactive, shallowRef } from 'vue'
import { AudioPlayer } from '../my/libs/AudioPlayer'
// setup()
const audio = shallowRef()
const player = computed(() => (audio.value ? new AudioPlayer(audio) : null))
const state = reactive({
  progress: 0,
})
watchExtractedObservable(
  player,
  (p) => p.progress$,
  (percentage) => {
    state.progress = percentage * 100
  },
  {
    onError: (err) => {
      console.error(err)
    },
  },
  {
    immediate: true,
  },
)

类型声明

显示类型声明
ts
export type 
OnCleanup
= (
cleanupFn
: () => void) => void
export type
WatchExtractedObservableCallback
<
Value
,
OldValue
,
ObservableElement
,
> = (
value
:
NonNullable
<
Value
>,
oldValue
:
OldValue
,
onCleanup
:
OnCleanup
,
) =>
Observable
<
ObservableElement
>
export interface WatchExtractedObservableOptions {
onError
?: (
err
: unknown) => void
onComplete
?: () => void
} export declare function
watchExtractedObservable
<
T
extends
MultiWatchSources
,
E
,
Immediate
extends
Readonly
<boolean> = false,
>(
sources
: [...
T
],
extractor
:
WatchExtractedObservableCallback
<
MapSources
<
T
>,
MapOldSources
<
T
,
Immediate
>,
E
>,
callback
: (
snapshot
:
E
) => void,
subscriptionOptions
?: WatchExtractedObservableOptions,
watchOptions
?:
WatchOptions
<
Immediate
>,
):
WatchHandle
export declare function
watchExtractedObservable
<
T
extends
Readonly
<
MultiWatchSources
>,
E
,
Immediate
extends
Readonly
<boolean> = false,
>(
source
:
T
,
extractor
:
WatchExtractedObservableCallback
<
MapSources
<
T
>,
MapOldSources
<
T
,
Immediate
>,
E
>,
callback
: (
snapshot
:
E
) => void,
subscriptionOptions
?: WatchExtractedObservableOptions,
watchOptions
?:
WatchOptions
<
Immediate
>,
):
WatchHandle
export declare function
watchExtractedObservable
<
T
,
E
,
Immediate
extends
Readonly
<boolean> = false,
>(
source
:
WatchSource
<
T
>,
extractor
:
WatchExtractedObservableCallback
<
T
,
Immediate
extends true ?
T
| undefined :
T
,
E
>,
callback
: (
snapshot
:
E
) => void,
subscriptionOptions
?: WatchExtractedObservableOptions,
watchOptions
?:
WatchOptions
<
Immediate
>,
):
WatchHandle
export declare function
watchExtractedObservable
<
T
extends object,
E
,
Immediate
extends
Readonly
<boolean> = false,
>(
source
:
T
,
extractor
:
WatchExtractedObservableCallback
<
T
,
Immediate
extends true ?
T
| undefined :
T
,
E
>,
callback
: (
snapshot
:
E
) => void,
subscriptionOptions
?: WatchExtractedObservableOptions,
watchOptions
?:
WatchOptions
<
Immediate
>,
):
WatchHandle

源码

源码文档

贡献者

一纸忘忧
Anthony Fu
Arthur Darkstone
SerKo
Robin
IlyaL
James Garbutt
OrbisK
Anthony Fu
Voltra

更新日志

b8102 - feat(watch): update watch return typo in watchExtractedObservable, watchDebounced, watchDeep, watchImmediate, watchOnce, watchThrottled and watchWithFilter (#4896)
00a72 - fix(types): update type casting for watch functions to use WatchSource (#4966)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
23b8c - feat(rxjs): add useExtractedObservable and watchExtractedObservable (#3453)