1---
2category: '@RxJS'
3---
4 
5# watchExtractedObservable
6 
7Watch the values of an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables.
8 
9Automatically unsubscribe on observable change, and automatically unsubscribe from it when the component is unmounted.
10 
11Supports all overloads of [`watch`](https://vuejs.org/guide/essentials/watchers.html#basic-example).
12 
13## Usage
14 
15<!-- TODO: import rxjs error if enable twoslash -->
16 
17```ts no-twoslash
18import { watchExtractedObservable } from '@vueuse/rxjs'
19import { computed, reactive, useTemplateRef } from 'vue'
20import { AudioPlayer } from '../my/libs/AudioPlayer'
21 
22// setup()
23 
24const audio = useTemplateRef('audio')
25const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
26const state = reactive({
27  progress: 0,
28})
29 
30watchExtractedObservable(player, p => p.progress$, (percentage) => {
31  state.progress = percentage * 100
32})
33```
34 
35If you want to add custom error handling to an `Observable` that might error, you can supply an optional `onError` configuration. Without this, RxJS will treat any error in the supplied `Observable` as an "unhandled error" and it will be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in Node).
36 
37You can also supply an optional `onComplete` configuration if you need to attach special behavior when the watched observable completes.
38 
39```ts no-twoslash
40import { watchExtractedObservable } from '@vueuse/rxjs'
41import { computed, reactive, useTemplateRef } from 'vue'
42import { AudioPlayer } from '../my/libs/AudioPlayer'
43 
44// setup()
45 
46const audio = useTemplateRef('audio')
47const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
48const state = reactive({
49  progress: 0,
50})
51 
52watchExtractedObservable(player, p => p.progress$, (percentage) => {
53  state.progress = percentage * 100
54}, {
55  onError: (err: unknown) => {
56    console.error(err)
57  },
58  onComplete: () => {
59    state.progress = 100 // or 0, or whatever
60  },
61})
62```
63 
64If you want, you can also pass `watch` options as the last argument:
65 
66```ts no-twoslash
67import { watchExtractedObservable } from '@vueuse/rxjs'
68import { computed, reactive, useTemplateRef } from 'vue'
69import { AudioPlayer } from '../my/libs/AudioPlayer'
70 
71// setup()
72 
73const audio = useTemplateRef('audio')
74const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
75const state = reactive({
76  progress: 0,
77})
78 
79watchExtractedObservable(player, p => p.progress$, (percentage) => {
80  state.progress = percentage * 100
81}, {
82  onError: (err: unknown) => {
83    console.error(err)
84  }
85}, {
86  immediate: true
87})
88```
89 
90## Subscription Options
91 
92| Option       | Type                     | Description                          |
93| ------------ | ------------------------ | ------------------------------------ |
94| `onError`    | `(err: unknown) => void` | Error handler for Observable errors  |
95| `onComplete` | `() => void`             | Called when the Observable completes |
96 
97## Return Value
98 
99Returns a `WatchHandle` that can be used to stop watching:
100 
101```ts no-twoslash
102import { watchExtractedObservable } from '@vueuse/rxjs'
103import { ref } from 'vue'
104 
105const source = ref({ data$: null })
106 
107const stop = watchExtractedObservable(source, s => s.data$, (data) => {
108  console.log(data)
109})
110 
111// Later, stop watching
112stop()
113```
114 
115## Type Declarations
116 
117```ts
118export type OnCleanup = (cleanupFn: () => void) => void
119export type WatchExtractedObservableCallback<
120  Value,
121  OldValue,
122  ObservableElement,
123> = (
124  value: NonNullable<Value>,
125  oldValue: OldValue,
126  onCleanup: OnCleanup,
127) => Observable<ObservableElement>
128export interface WatchExtractedObservableOptions {
129  onError?: (err: unknown) => void
130  onComplete?: () => void
131}
132export declare function watchExtractedObservable<
133  T extends MultiWatchSources,
134  E,
135  Immediate extends Readonly<boolean> = false,
136>(
137  sources: [...T],
138  extractor: WatchExtractedObservableCallback<
139    MapSources<T>,
140    MapOldSources<T, Immediate>,
141    E
142  >,
143  callback: (snapshot: E) => void,
144  subscriptionOptions?: WatchExtractedObservableOptions,
145  watchOptions?: WatchOptions<Immediate>,
146): WatchHandle
147export declare function watchExtractedObservable<
148  T extends Readonly<MultiWatchSources>,
149  E,
150  Immediate extends Readonly<boolean> = false,
151>(
152  source: T,
153  extractor: WatchExtractedObservableCallback<
154    MapSources<T>,
155    MapOldSources<T, Immediate>,
156    E
157  >,
158  callback: (snapshot: E) => void,
159  subscriptionOptions?: WatchExtractedObservableOptions,
160  watchOptions?: WatchOptions<Immediate>,
161): WatchHandle
162export declare function watchExtractedObservable<
163  T,
164  E,
165  Immediate extends Readonly<boolean> = false,
166>(
167  source: WatchSource<T>,
168  extractor: WatchExtractedObservableCallback<
169    T,
170    Immediate extends true ? T | undefined : T,
171    E
172  >,
173  callback: (snapshot: E) => void,
174  subscriptionOptions?: WatchExtractedObservableOptions,
175  watchOptions?: WatchOptions<Immediate>,
176): WatchHandle
177export declare function watchExtractedObservable<
178  T extends object,
179  E,
180  Immediate extends Readonly<boolean> = false,
181>(
182  source: T,
183  extractor: WatchExtractedObservableCallback<
184    T,
185    Immediate extends true ? T | undefined : T,
186    E
187  >,
188  callback: (snapshot: E) => void,
189  subscriptionOptions?: WatchExtractedObservableOptions,
190  watchOptions?: WatchOptions<Immediate>,
191): WatchHandle
192```
193