watchDeep
{deep: true}
を使用して値を監視するための簡略記法です。
使用方法
watch
と似ていますが、{ deep: true }
が使用されます。
ts
import { watchDeep } from '@vueuse/core'
const nestedObject = ref({ foo: { bar: { deep: 5 } } })
watchDeep(nestedObject, (updated) => {
console.log(updated)
})
onMounted(() => {
nestedObject.value.foo.bar.deep = 10
})
型宣言
typescript
export declare function watchDeep<
T extends Readonly<WatchSource<unknown>[]>,
Immediate extends Readonly<boolean> = false,
>(
source: [...T],
cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
options?: Omit<WatchOptions<Immediate>, "deep">,
): WatchStopHandle
export declare function watchDeep<
T,
Immediate extends Readonly<boolean> = false,
>(
source: WatchSource<T>,
cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
options?: Omit<WatchOptions<Immediate>, "deep">,
): WatchStopHandle
export declare function watchDeep<
T extends object,
Immediate extends Readonly<boolean> = false,
>(
source: T,
cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
options?: Omit<WatchOptions<Immediate>, "deep">,
): WatchStopHandle
ソースコード
コントリビューター
変更ログ
v12.0.0-beta.1
2024/11/21v11.0.0-beta.2
2024/7/17v10.1.0
2023/4/22v10.0.0-beta.3
2023/4/12v10.0.0-beta.0
2023年3月14日