watchExtractedObservable

分类

@RxJS

导出大小

264 B

包

@vueuse/rxjs

上次更改

上个月

侦听从一个或多个可组合项中提取的 RxJS Observable 的值。

在可观察对象改变时自动取消订阅，并在组件卸载时自动取消对其的订阅。

支持 watch 的所有重载。可在 @vueuse/rxjs 附加组件中使用。

用法

TypeScript

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
})

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')）。

如果需要在被侦听的 observable 完成时附加特殊行为，您还可以提供一个可选的 onComplete 配置。

TypeScript

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 // or 0, or whatever
  },
})

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 // or 0, or whatever
    },
  },
)

如果您愿意，还可以将 watch 选项作为最后一个参数传入

TypeScript

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
})

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,
  },
)

类型声明

显示类型声明

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

更新日志

v14.0.0-alpha.3 于

b8102 - feat(watch): 更新 watchExtractedObservable, watchDebounced, watchDeep, watchImmediate, watchOnce, watchThrottled 和 watchWithFilter 中 watch 返回值的类型错误 (#4896)

v14.0.0-alpha.0 于

00a72 - fix(types): 更新 watch 函数的类型转换以使用 WatchSource (#4966)

v12.0.0-beta.1 于

0a9ed - feat!: 放弃对 Vue 2 的支持，优化打包并清理 (#4349)

v10.5.0 于

23b8c - feat(rxjs): 添加 useExtractedObservable 和 watchExtractedObservable (#3453)