9571ede84b
BREAKING CHANGE: `watch` behavior has been adjusted.
- When using the `watch(source, callback, options?)` signature, the
callback now fires lazily by default (consistent with 2.x
behavior).
Note that the `watch(effect, options?)` signature is still eager,
since it must invoke the `effect` immediately to collect
dependencies.
- The `lazy` option has been replaced by the opposite `immediate`
option, which defaults to `false`. (It's ignored when using the
effect signature)
- Due to the above changes, the `watch` option in Options API now
behaves exactly the same as 2.x.
- When using the effect signature or `{ immediate: true }`, the
intital execution is now performed synchronously instead of
deferred until the component is mounted. This is necessary for
certain use cases to work properly with `async setup()` and
Suspense.
The side effect of this is the immediate watcher invocation will
no longer have access to the mounted DOM. However, the watcher can
be initiated inside `onMounted` to retain previous behavior.
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { ref, computed, watch } from './index'
|
|
import { expectType } from 'tsd'
|
|
|
|
const source = ref('foo')
|
|
const source2 = computed(() => source.value)
|
|
const source3 = () => 1
|
|
|
|
// eager watcher's oldValue will be undefined on first run.
|
|
watch(source, (value, oldValue) => {
|
|
expectType<string>(value)
|
|
expectType<string | undefined>(oldValue)
|
|
})
|
|
|
|
watch([source, source2, source3], (values, oldValues) => {
|
|
expectType<(string | number)[]>(values)
|
|
expectType<(string | number | undefined)[]>(oldValues)
|
|
})
|
|
|
|
// const array
|
|
watch([source, source2, source3] as const, (values, oldValues) => {
|
|
expectType<Readonly<[string, string, number]>>(values)
|
|
expectType<
|
|
Readonly<[string | undefined, string | undefined, number | undefined]>
|
|
>(oldValues)
|
|
})
|
|
|
|
// lazy watcher will have consistent types for oldValue.
|
|
watch(source, (value, oldValue) => {
|
|
expectType<string>(value)
|
|
expectType<string>(oldValue)
|
|
})
|
|
|
|
watch([source, source2, source3], (values, oldValues) => {
|
|
expectType<(string | number)[]>(values)
|
|
expectType<(string | number)[]>(oldValues)
|
|
})
|
|
|
|
// const array
|
|
watch([source, source2, source3] as const, (values, oldValues) => {
|
|
expectType<Readonly<[string, string, number]>>(values)
|
|
expectType<Readonly<[string, string, number]>>(oldValues)
|
|
})
|
|
|
|
// source + immediate: true
|
|
watch(
|
|
source,
|
|
(value, oldValue) => {
|
|
expectType<string>(value)
|
|
expectType<string | undefined>(oldValue)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(
|
|
[source, source2, source3],
|
|
(values, oldValues) => {
|
|
expectType<(string | number)[]>(values)
|
|
expectType<(string | number | undefined)[]>(oldValues)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
// const array
|
|
watch(
|
|
[source, source2, source3] as const,
|
|
(values, oldValues) => {
|
|
expectType<Readonly<[string, string, number]>>(values)
|
|
expectType<
|
|
Readonly<[string | undefined, string | undefined, number | undefined]>
|
|
>(oldValues)
|
|
},
|
|
{ immediate: true }
|
|
)
|